Smartify Your Video Embeds - Tutorial

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
• demo.css
• demo.js

and check the comments in the files.

Open in JSFiddle

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
• FitVids.js
• jQuery
• FontAwesome
• Google Fonts

External videos are randomly picked from YouTube and Vimeo and were publicly available at the time of writing. Cover images are picked from Unsplash and served by Lorem Picsum. Some videos are picked from Pexels.

Code has been built on JSFiddle, hosting for the demo files is provided by GitHub Pages.