Images aren’t the only media that need to play nice within our flexible grid. And images were easy compared to video! When you set the width of an <img> and override its height value to auto, the image will naturally retain its aspect ratio. This is also true of <video>, but honestly most video on the web these days embedded on pages directly through the <video> tag.
Case in point, I tried doing that here on the lodge and ultimately gave up since Vimeo Pro was so much more practical (works on any device, nice player, cheap, fast streaming, etc). You don’t embed Vimeo videos (typically) through a <video> tag, you use their provided embed code, which is an <iframe>. YouTube and number of other of the more popular video services use this too.
iframe do not keep their aspect ratio when resizing like images do. However, we can figure out what the aspect ratio is originally by testing it’s width and height and diving. The we can use that information to create a box with that exact aspect ratio (using a padding trick, see Uncle Dave’s Ol’ Padded Box) and absolutely position the iframe within it. See: Intrinsic Ratios for Videos. That way when we resize wider and narrower, the video essentially behaves just like an image, respecting its apsect ratio.
Or, we could just use FitVids.js (which I helped write) to automate this entire process (it literally does just what I described, only automatically). We include this library in our global.js in the same concatenating way we did with prism.js. For the first time we need jQuery, so we snag that link from ScriptSrc and link it up in the footer before our global.js. Then in our global.js we call FitVids. Done and done.
“works on any device, nice player, cheap, fast streaming, etc.”
Actually it worked on my Android device no problem all along, ’till you went to Vimeo, now it’s complaining that I need to use a “browser that provides native H.264 support or install Flash”, I tried with 4 different browsers (including Android Stock). Just FYI I have a Motorola Photon with Android 2.3.4…
Otherwise, I’m really enjoying all the videos, thanx a million!!!
Interesting. I’ll have to do some more Android testing. I can’t imagine Vimeo just decided to not support Android… Maybe it’s something I can change or something else going on.
I’m going to bury this comment since it’s kind of a specific temporary technical issue.
I have the same phone and it doesn’t let me play vimeo ever and before I used to be able to play youtube videos just by clicking on the url (ie. when someone shares a youtube link on facebook) but now I have to play them strictly through the youtube app or they won’t play. I am thinking the problem is just with this phone?
hey Chris, I have a question for you, I’ve try do follow you along those videos, and working on my local host using MAMP but the free edition. The thing is if in my global.js i will import the FitVids.js, when I inspect things in console nothing happen. I have a youtube video embed using . If i copy and paste the the js code to make the video be responsive in to the console like this
the console returns me $(article).fitVids(); this is not a function. I did check if my Jquery library is imported and it’s on top, and it’s there.
The wired thing is if i don’t use codekit to tell my global.js file to import the FitVids.js, but rather I will do manually in my footer.php after the jQuery library is imported from google, it works, only if i paste the code again in the console.
Do you have any idea if it’s because I didn’t set up a local url, like you did? and instead of that I’m using localhost:8888/static/?
Thank you so much.
Try using $(‘article’).fitVids();
You’re missing the quotes surrounding the word article…
I’ve try that no change at all. I have the same exact code as Chris has in his video, on his end it works on mine it don’t. I spent 4 hours on this and I still have the problem.
For future people who have this problem… I spent a solid 30 minutes trying to figure out why the console was logging “Uncaught TypeError: undefined is not a function”. Ultimately i was calling the function as
which is missing a capital letter. =( It is always the small things that cause the problems riight? haha
@Eduard
Try a class or an ID
Did you ever figure out what was causing the black bars? I’m having a similar problem. For some reason fitVids is calculating the padding at 75% instead of 62.5% for a 16:10 video.
I think in the case of this video it had black bars literally in it. Or, the aspect ratio as it came from Vimeo was causing black bars even without FitVids. The trick is to get it displaying correctly without FitVids (adjust the hight/width, drop it in [CodePen](http://codepen.io/) for a sec to play with it) then it will also size fine WITH FitVids. Unless you find that’s not the case then open an issue in the [repo](https://github.com/davatron5000/FitVids.js/issues?direction=desc&sort=created&state=open).