HTML 5 Video

Code for Embedding video

HTML 5 video tag with multiple sources:

This is the code used above.
This example does not use the codecs attributes and values which might not be absolutely necessary.

<video width="600" height="250" controls>
<source src="derrick_final_comp1.mp4" type="video/mp4">
<source src="derrick_final_comp1.webm" type="video/webm">
<source src="derrick_final_comp1.theora.ogv" type="video/ogg">
<p>Your browser does not support html5 video</p>
</video>

HTML 5 video tag with 1 .mp4 source. This is probably fine most of the time now:

<video src="derrick_final_comp1.mp4" width="600" height="250" preload controls type="video/mp4"></video>

This version has the codecs used(probably not necessary anymore)

<video width="600" height="250" controls autoplay>
<source src="derrick_final_comp1.mp4" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
<source src="derrick_final_comp1.webm" type='video/webm; codecs="vp8, vorbis"'>
<source src="derrick_final_comp1.theora.ogv" type='video/ogg; codecs="theora, vorbis"'>
<!--fallback in case the users browser sucks-->
<p>Your browser does not support html5 video</p>
</video>

Make it responsive in the same way as images

video {
width: 100%; ( or max-width to not get bigger than the videos actual size)
height: auto;
}

or use max-width to not get bigger than the videos actual size, and aspect-ratio to keep the video the rigth shape when it it responsive

video {
max-width: 100%;
height: auto;
aspect-ratio:16 / 9;
}

aspect-ratio is a bit new, but will help with keeping video the right shape, and can work on iframes from youtube as well.

16 / 9 is the typical shape for much, but NOT ALL video. For those of you that shoot vertical video(gross), it would be different.
It might be 9 / 16, for example.

Youtube or Vimeo:

Use the share button for youtube or vimeo files and choose embed. Copy the code to your page.

Youtube example

Making youtube responsive is a bit more complicated since it is in an iframe, but see the bit on aspect-ratio above and

See this article for more help with making youtube responsive.

The aspect ratio property is OK for current browsers though.

See these sites for html5 video help

To encode video: