Tuesday Tip: Using HTML5 Video and Getting Responsive
So, this works here on my WordPress blog, I can’t say if it’ll work everywhere.
I wanted to insert a Ted Talk video, using the h.264 encoded mp4 instead of Flash.
I found out a convenient way of getting to the full path to the video by watching optikalefxx’s YouTube video Embed HTML5 Versions of TED videos and how to write the video tag that I wanted.
And then I found out how to set the video to act responsively from CSS Tricks’ Fluid Width Video page.
Putting it all together I used:
<video controls src="http://download.ted.com/talks/RachelBotsman_2012G-480p.mp4?apikey=TEDRSS" width="100%" height="auto"></video>
This was great! I’m just wondering if there is a way to do some sort of “auto” for the video resolution. I see here that you’ve put in 480p, but if you watch a video on TED I’m not sure if people notice, but it will start playing at whatever is fastest, and eventually up the resolution to HD if it couldn’t load in the first place.
Rather than pigeon-hole the embedded content as a certain type, it would be great to have that be “auto.” I’m attempting to embed one without the tag at all and see how that works out…
Rob, thanks for the comment. Good question about letting it autoselect. The “real” way to handle that is to use TED’s native embed code (but then you’re at the mercy of their decisions). In this case, the 480p version *was* the highest quality that was available for that video. It’s in the filename of the HD download if you try and download that video. Also I seem to recall the YouTube video in the post said something about the quality–perhaps it would be a good idea for you to have a watch of that.