responsive embedded video

[briandavidokeefe]

I've embedded a video into a text widget in the same child theme for Genesis. The embedded video (widget) is not responsive. I've found a few websites that provide some variations of a solution for this, but none of them work for me, and now I'm guessing that it might be an issue with Genesis itself. However, even when using the browser developer tools, I can't figure out what the problem is. The video is getting cut off rather than made proportionately smaller as the browser resizes. To strip away complexity, I've tried using Genesis itself (without a child theme) and embedding a video in a text widget in the right column. I used the following links to get the additional CSS and HTML to double-wrap the embed code.

http://www.alistapart.com/articles/c...tios-for-video

http://www.alistapart.com/d/creating.../example3.html

http://webdesignerwall.com/tutorials/css-elastic-videos

Has anyone else successfully made this work? I really want the entire video dimensions to be visible when looking at it on an iPhone, for example.

Thanks!

[billerickson]

The only way to make videos responsive in any theme is to use javascript ( http://fitvidsjs.com/ ).

1. In your theme folder, create a folder called "js"
2. Inside /js, add the jquery.fitvids.js file
3. Inside /js, create a new file called be-video.js with the following contents: https://gist.github.com/3868135
4. In functions.php, add this (without the <?php at the top): https://gist.github.com/3868128

[briandavidokeefe]

Bill,

Thank you. I knew there was a JS solution, but was trying to avoid it if possible. Now that I've spent days trying to get this working without JS, I'm ready to go this route.

I just installed the "FitVids for WordPress" plugin, which uses jquery.fitvids.js. It does the trick for YouTube videos. In the FitVids option panel I gave it a class name (for testing, I used .brian), and then in my text widget I pasted the embed code and wrapped it with <div class="brian"></div>.

However, this solution doesn't work for the video that I need to embed (which uses "object" and "embed" rather than "iframe"). I checked the jquery.fitvids.js code, and it includes the "object" and "embed" selectors, so I'm still not sure what the problem is.

Any ideas?