How to Embed Video onto a site
HTML5 compliant, with fall back to flash for IE8 and earlier. Covers all of the browsers we care about and many of the ones that we don't. Also addresses mobile devices in some circumstances.
Client provided me with a:
YouTube Video (Preferred Method)
Embedding through YouTube is super easy and should be the preffered method in almost any circumstance it is available.
- Navigate to the video on YouTube
- Click "Share" (beneath the video)
- Click options and indicate HD link if desired
- Click "Embed"
- Unclick "Show suggested videos"
- Indicate desired size
- Copy the embed code
- Paste the iframe code into the desired location on site
- Remove the frameborder="0" tag, not supported in HTML5 (if desired, add with CSS border attribute)
And that's all there is to it.
The stylesheet needs to also have:
iframe {display:block;width:100%;height:auto;max-width:100%;aspect-ration:auto 16 / 9}
But most, if not all, of these should already be present.
Video from a file
Direct hosting of the video file(s). Necessary when video is to be displayed behind secure section of website or if client does not wish their video to be hosted on YouTube.
Step 1
A method to convert the file you received into .MP4, .WEBM, and .OGV formats. XMedia Recode is a
free converter that can do this for you.
Step 2
Export and save the 3 file types.
Copy/paste the following snippet into your page:
<video controls="controls" poster="POSTER" preload="none">
<source src="/PATH.mp4" type="video/mp4" />
<source src="/PATH.webm" type="video/webm" />
<source src="/PATH.ogv" type="video/ogg" />
</video>
Replacing
- PATH = path to filename (don't forget the initial / please)
- POSTER = the still image to be displayed while loading
The stylesheet needs to also have:
video {display:block;width:100%;height:auto;max-width:100%;aspect-ration:auto 16 / 9}
(These are the same as the iframe items in the YouTube example.)