Community Forums › Forums › Archived Forums › Design Tips and Tricks › Tip: How to Make Youtube Videos Responsive
Tagged: responsive youtube videos
- This topic has 33 replies, 15 voices, and was last updated 10 years, 9 months ago by Dan B.
-
AuthorPosts
-
April 17, 2013 at 6:53 pm #36043afinevoMember
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?
April 17, 2013 at 7:02 pm #36048AnitaKeymasterJust copy it to the very bottom of the Style sheet.
Love coffee, chocolate and my Bella!
April 18, 2013 at 12:32 am #36084afinevoMemberThanks anitac, it works great!
April 18, 2013 at 9:56 pm #36298pluzitoParticipantThanks 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
April 19, 2013 at 9:18 am #36371MarcoMemberHere's my solution without using plugins http://neatandplain.com/responsive-youtube-or-vimeo-videos-in-genesis/
May 4, 2013 at 10:39 am #39264pluzitoParticipantWow 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
May 4, 2013 at 6:09 pm #39310pluzitoParticipantMarco, 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
May 12, 2013 at 11:26 am #40569rick4himMemberCan you still just use the youtube plug in and ombeed with that plug in?
May 12, 2013 at 11:30 am #40570rick4himMemberI just installed the fluid video plug in on my test site and it's looking strange on the iphone. Any thoughts?
May 28, 2013 at 5:35 pm #42978Greg WMemberThanks 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.
June 4, 2013 at 6:53 am #43996csschopperMemberHey, I also used fluid video embeds plugin
June 4, 2013 at 7:12 am #44000csschopperMemberHey, see this video to make a youtube videos responsive http://www.youtube.com/watch?v=PL_R3zEjqEc
June 13, 2013 at 1:51 pm #45718DavidFMemberGuys. 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
July 3, 2013 at 8:24 pm #49114Dan BMemberThe 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. -
AuthorPosts
- The topic ‘Tip: How to Make Youtube Videos Responsive’ is closed to new replies.