In this video we show you how to make your video embeds as responsive as the rest of your site layout. No longer will you be troubled by having your videos cut-off when someone views your site on mobile browser!
Here is the html and css used in the video:
Very cool. Thanks heaps for this fix.
I use Wistia too, and I just tried out your fix and am getting letterboxing on the left and right of the video, even when the browser is at a nice full width.
Here’s a screenshot:
http://screencast.com/t/kElqqed24e9
If you have a moment, do you have any idea why that’s happening for me with your code?
The regular wistia embed doesn’t have any letterboxing happening, and I don’t see any in your video when you resize the browser to a phone layout (with the responsive markup and css in place.)
Any ideas?
I’d give you a link to the post I tried this on, but I removed the markup because of the letterboxing that’s happening.
Cheers, and thanks again for the tip. Hope I can figure out what’s happening with the letterboxing.
Hi Forest,
the CSS trick shown in this video is not dynamic like our other Jquery sizing fixes (the one we have built-into our WistiaMember solution), but it can be adjusted to fit your video. I think the issue is that your video has a slightly different width to height ration than 16:9.
The fix is easy, just change the padding percentage a bit to a HIGHER percentage. So, instead of 56.25% try using firebug to go to as much as 62.25% (increase one percent at a time). Voila’