I recently noticed that a few people near and dear to me have videos on their websites that don’t look good on mobile devices. Specifically, they do not resize to fit the smaller screen. I vowed to help them fix that and that’s what this post is about.
The problem is that some video hosting services (notably YouTube) still provide embed codes that ignore mobile devices. Unfortunately people trust YouTube more than their own web skills. And if they find out only half their video is showing up on their phone, they assume its their own fault.
Even if they want to fix the problem, many are unsure where to start.
What they are missing is a “responsive video embed code”. I assumed I’d have to do some digging and find the simplest way to alter the code that YouTube provides. Some small hack like altering the width from some specific number of pixels to 100% and removing the height. That might actually work, but honestly it’s easier than that, so I won’t even test it.
Just head over to http://embedresponsively.com/ and enter your YouTube url (that’s the page on Youtube where your video lives and looks like this: https://www.youtube.com/watch?v=CBNdFX7V_5Y)
Use the embed code it gives you and your videos should be mobile-ready in no time.
by 