All aspects of the web are always changing. HTML was introduced in 1990, and HTML 5 in 2014. Going through HTML 2 (1995), HTML 3 (1997), and HTML 4 (2000). CSS (Cascading Style Sheets) has also changed over the years, from CSS 1 in 1996, CSS 2 (1998) and CSS 3 in 2018.
The embed and object HTML tages were introduced in the early 1990s. Both tags were, and sometimes still are, used to insert external content or applications, such as a video player or codec, into a web page. For video, neither worked particularly well and most modern browsers do not allow or limit the use of plugins.
Flash SWF files very popular at one time using the JavaScript SWFObject library, but browser support for them is now depreciated.
All major browsers now support the MP4 H.264 with AAC or MP3 audio standard so it is just that format that is now most used.
Video Tag
The problem for people wanting to put video on their website is that it wasn't until 2010 that the video tag was widely supported in browsers and even then browsers would only support certain video formats. Initially, Chrome, Firefox, and Opera supported the WebM and Ogg formats, while Chrome, Safari, and Internet Explorer supported MP4. This meant that video had to be available in all three formats MP4, Ogg and WebM to be successfully viewed in all browsers. This meant having to to use something like:
<video controls>
<source src="somevideo.mp4" type="video/mp4">
<source src="somevideo.ogg" type="video/ogg">
<source src="somevideo.webm" type="video/webm">
Sorry, your browser does not support HTML5 video in WebM,
<!-- Embed a Flash player here, to play video in older browsers -->
</video>
On its own the video tag simply displays the video, it doesn't center it, it is not responsive and by default displays the video at its native size and aspect ratio. In this case 640 x 480px (4/3, 1.333 aspect ratio) and 854 x 480px (16/9, 1:778 aspect ratio).
The simplest way of centering the video and making it responsive is to use CSS. You can give the video tag an ID, class or simply use the CSS on any video tag. In this example I've given it the class name "simplevideo". The CSS for it is:
Here's what's happening. The video tag is an inline element so to center it using "margin: 0 auto;" it has to be turned into a block element using, "display: block;". If there is room, the video will display at a width of 600px, but once the container is smaller than that, the video will display at 100% of the container width.
YouTube and Video Embeds
I wanted a generic method that was responsive, centered, and displayed videos at the correct aspect ratio when embedding iframe based videos from YouTube and Vimeo. The method used for self-hosted videos using the video tag will not work for videos in iframes.
Most of the CSS I found to resize the iframe such as Maintaining Aspect Ratios for HTML Videos with CSS on Useful Angle and Fluid Width Video by Chris Coyier on CSS Tricks have some problems. If the video container is less than the page width then the videos are not centered without adding another div. I eventually found Kyrie Tompkins-Overlock's article Better Responsive Video Embeds that very nearly did what I wanted.
Kyrie's solution uses the padding-top or padding-bottom method, * 0.5625 for 16/9 aspect ratio videos and 0.75 for 4/3 aspect ratio ones. CSS is capable of using simple variables and doing simple calculations. This is shown in Chris Coyier's article. I combined the two and came up with:
/* This calculates the height of the video wrapper. If not found in the HTML as in <div class="videowrapper" style="--aspect-ratio: 4 / 3;"> for old squarish video will defuly back to 16:9 (widescreen) */
.videowrapper:before {
content: '';
display: block;
position: relative;
padding-bottom: calc(var(--aspect-ratio, .5625) * 100%);
}
You may think there is something wrong when the seond video is played. There are black bars down either side of the video! This is not an error in the HTML or CSS, it's happening because the video on YouTube is actually an older 4/3 ratio video that was uploaded as an widescreen 16/9 one.
Fancybox 3
I like Fancybox when I've got a lot of images and videos to show. Unfortunately the documentation doesn't make it very clear but the aspect ratio of videos has to be adjusted if anything else than widescreen (16:9) videos are used. This is easily done using its data-ratio property.
Once it is installed the following HTML produces the videos below:
<p class="ctr"><a href="https://www.youtube.com/watch?v=t93Fg7RdgiA" data-fancybox="gallery" data-ratio="1.333"> <img src="https://img.youtube.com/vi/t93Fg7RdgiA/mqdefault.jpg" alt="Video: Indo-China - Navy Aids Evacuation (1954)" title="Video: Indo-China - Navy Aids Evacuation (1954)" /></a>
<a href="https://www.youtube.com/watch?v=VL2iaadkQCo" data-fancybox="gallery"> <img src="https://img.youtube.com/vi/VL2iaadkQCo/mqdefault.jpg" alt="Video: HMS Warrior Aids Evacuation (1954)" title="Video: HMS Warrior Aids Evacuation (1954)" /></a></p>
Notice that data-ratio="1.333" is required for the first video but not for the second.
In the above I've used the video thumbnails created by YouTube. There's a useful discussion on Stack Overflow about the various thumbnails that YouTube automatically produces when a vide is uploaded.
Video Players
If you prefer to not use the inbuilt browser video support for your own website, then there are still plenty of video players around that can be used. The main advantages of these is that they are customizable for your website and can handle most video formats.
