Tip: How to Make Youtube Videos Responsive

[afinevo]

Where in the CSS style sheet should I add the video class?  I'm still learning CSS so it's not very obvious to me.  I can't stick it just anywhere I want can I?

[AnitaC]

Just copy it to the very bottom of the Style sheet.

---

Need help with customization or troubleshooting? Reach out to me.

[afinevo]

Thanks anitac, it works great!

[pluzito]

Thanks for the trick but I don't get how to apply this if I already have posted more than 500 videos with oembed :S I have to wrap 500 youtube links? Thanks for the info

[Marco]

Here's my solution without using plugins http://neatandplain.com/responsive-youtube-or-vimeo-videos-in-genesis/

---

Neat & Plain – Genesis and WordPress specialist

[pluzito]

Wow Marco, I got it working and it was sooooooo easy! StudioPress, please, you should give us this out from the box. Marco, I've downloaded the script js files, and instead of creating a lib/js folder inside my Metro Theme folder, I've put the files inside the js Metro The Folder. Then I change the wp_register_script('fluidvids', get_stylesheet_directory_uri() . '/lib/js/fluidvids.js', array(), $ver, true); line for wp_register_script('fluidvids', get_stylesheet_directory_uri() . '/js/fluidvids.js', array(), $ver, true); and it worked flawless. I've written a memo on my notebook about this change to take care if the theme upgrades. Thanks for the help, I spent a couple of weed trying to notice which could be the best way to get videos oEmbeded responsive... have a nice weekend everybody

[pluzito]

Marco, this is crazy, but when I use that script, my YouTube sidebar widget (inserted with this code:

<iframe src="http://www.youtube.com/subscribe_widget?p=doggshiphop"
style="overflow: hidden; height: 100px; width: 300px; border: 0;"
scrolling="no" frameBorder="0">
</iframe>

DISAPPEARS!

I deleted the functions.php lines inserted before, and now works fine (but i have no responsive videos :S). Do you know how can I solve this to still get videos responsive but without dissapearing my widget? thanks in advance

[rick4him]

Can you still just use the youtube plug in and ombeed with that plug in?

[rick4him]

I just installed the fluid video plug in on my test site and it's looking strange on the iphone. Any thoughts?

 

http://noahsdad.com/test/pincer-grasp/

[Greg W]

Thanks for the tips everyone. I just tried out the Advanced Responsive Video Embedder plugin mentioned above and it worked fine. I am also going to try out fitvids.js just to see how it works but for my purposes the plugin is an easy solution.

I have another job that will be using VideoPress so will see what works best for that application. Has anyone tried one of these solutions with VideoPress?

Thanks,

Greg.

[csschopper]

Hey, I also used fluid video embeds plugin

http://wordpress.org/extend/plugins/fluid-video-embeds/

http://www.csschopper.com/psd-to-wordpress.shtml

[csschopper]

Hey, see this video to make a youtube videos responsive http://www.youtube.com/watch?v=PL_R3zEjqEc

http://www.csschopper.com/

[DavidF]

Guys. FitVids as previously posted is the best. http://wordpress.org/plugins/fitvids-for-wordpress/

You don't have to wrap each video and it works with Vimeo Pro!

The Fluid videos [fve] is ok for YouTube vids but I need fluid Vimeo.

Dave

---

David Frosdick WordPress Coaching

[Dan B]

The Fluidvid Javascript solution seems to be the easiest. The bonus is that you don't need to rely on a plugin. AND it should work better with the upcoming WordPress 3.6 custom post features.

It was already mentioned a few posts back, but here's the link again: http://neatandplain.com/responsive-youtube-or-vimeo-videos-in-genesis/

---

Dan @ ZindaMedia
Marketing, Fundraising and Social Media strategies for non-profits.

[Author]

Posts