https://github.com/edonosotti/smarter-video-embeds-tutorial
This tutorial code shows how to embed YouTube, Vimeo and self-hosted videos in HTML pages, customize them and control them via JavaScript.
https://github.com/edonosotti/smarter-video-embeds-tutorial
bootstrap html5 javascript jquery js video vimeo youtube
Last synced: about 2 months ago
JSON representation
This tutorial code shows how to embed YouTube, Vimeo and self-hosted videos in HTML pages, customize them and control them via JavaScript.
- Host: GitHub
- URL: https://github.com/edonosotti/smarter-video-embeds-tutorial
- Owner: edonosotti
- License: mit
- Created: 2020-05-20T20:41:39.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2020-05-26T20:46:34.000Z (about 6 years ago)
- Last Synced: 2025-04-06T11:51:45.794Z (about 1 year ago)
- Topics: bootstrap, html5, javascript, jquery, js, video, vimeo, youtube
- Language: HTML
- Homepage: https://edonosotti.github.io/smarter-video-embeds-tutorial/
- Size: 18.6 MB
- Stars: 1
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# Smartify Your Video Embeds 🎥 - Tutorial
**NOTE:** This code was written for an
[article](https://medium.com/rockedscience/smartify-your-video-embeds-f1cc13b775b5)
in the **RockedScience** publication on Medium.
## Description
This tutorial shows how to:
* embed externally hosted videos (on YouTube and Vimeo) into `HTML` pages
* embed self-hosted hosted videos into `HTML` pages
* make the embeds responsive with CSS or JS
* use custom cover images on all kinds of videos
* change resolution depending on the device screen size
* set video options
* use `JavaScript` to control videos
## Code
See:
* [demo.html](www/demo.html)
* [demo.css](www/demo.css)
* [demo.js](www/demo.js)
and check the comments in the files.
[Open in JSFiddle](https://jsfiddle.net/gh/get/library/pure/edonosotti/smarter-video-embeds-tutorial/tree/master/www)
## Reference documentation
See:
- https://www.w3schools.com/tags/tag_video.asp
- https://www.w3schools.com/tags/ref_av_dom.asp
- https://developers.google.com/web/updates/2017/09/autoplay-policy-changes
- https://developers.google.com/web/updates/2016/07/autoplay
- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/video
- https://stackoverflow.com/questions/50287175/html5-video-autoplay-feature-not-working-without-muted/50287806
- https://stackoverflow.com/questions/46745684/muted-autoplay-videos-stop-playing-in-safari-11-0
## Kudos
This demo uses code and assets from:
- [Bootstrap](https://getbootstrap.com)
- [FitVids.js](http://fitvidsjs.com)
- [jQuery](https://jquery.com)
- [FontAwesome](https://fontawesome.com)
- [Google Fonts](https://fonts.google.com)
External videos are randomly picked from [YouTube](https://www.youtube.com) and [Vimeo](https://vimeo.com) and were publicly available at the time of writing. Cover images are picked from [Unsplash](https://unsplash.com) and served by [Lorem Picsum](https://picsum.photos). Some videos are picked from [Pexels](https://www.pexels.com).
Code has been built on [JSFiddle](https://jsfiddle.net), hosting for the demo files is provided by [GitHub Pages](https://pages.github.com).