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 8, 2013 at 11:35 am #34031AnitaKeymaster
Please note - this will work on ANY Genesis theme.
I found some instructions here for making Youtube videos responsive. I wanted to put the code on here in case their website ever goes down like it did with some other instructions I found.
First you need to wrap your Youtube video in DIV tags like this:
<div class="video">YOUTUBE VIDEO CODE</div>
Then you need to add in the CSS to the video class:
.video { position: relative; padding-bottom: 56.25%; padding-top: 30px; height: 0; overflow: hidden; } .video iframe, .video object, .video embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .entry-content img, .entry-content iframe, .entry-content object, .entry-content embed { max-width: 100%; }
Love coffee, chocolate and my Bella!
April 8, 2013 at 2:52 pm #34097rick4himMemberI wonder why Studio Press doesn't just make it work out of the box. It's pretty standard for themes to have responsive video out of the box.
April 8, 2013 at 4:35 pm #34139AnitaKeymasterI think the problem might be adding the "DIV and Class" but I can't say for sure.
Love coffee, chocolate and my Bella!
April 8, 2013 at 6:14 pm #34158weslindaMemberGreat post. Ran into this issue on a client site, and after tons of searching I found that there is an amazing plugin out there for this as well. Had a situation where I needed a responsive video in a column inside the content area on a clients site. Dug for forever and this plugin worked wonderfully. And it works with a ton of the main video services. It's called Advanced Responsive Video Embedder. Really made this process so easy.
Plugin Link: http://wordpress.org/extend/plugins/advanced-responsive-video-embedder/
Client Video: http://www.tylliebarbosa.com/bio/
Loving the Genesis Life!
April 9, 2013 at 6:58 am #34252DavidFMemberI use Fluid Video Embeds which works great.
http://wordpress.org/extend/plugins/fluid-video-embeds/
Dave
April 10, 2013 at 7:52 am #34494CharlieLParticipantThank you guys for sharing!
Good to know the options.April 10, 2013 at 3:34 pm #34631crazymikesappsMember@ Dave, that is one bad ass plugin.
For anyone using the Yoast WP-SEO Video Plugin I could not get the http://wordpress.org/extend/plugins/advanced-responsive-video-embedder/ to work out of the box to get the video identified in the video-site-map, using the on page method.
But the http://wordpress.org/extend/plugins/fluid-video-embeds/ works with just the http://youtu.be/ggBq_ZSwa8s/ link shows the video properly sized, responsively and shows that it will be added to the video-site-map.
thank you all for this post.
Mike
April 10, 2013 at 7:34 pm #34667weslindaMemberMike, I created a support ticket for the Advanced Responsive Video Embeds plugin, perhaps you could assist them in troubleshooting this as it's a premium plugin so the developers may not have access to it to test.
http://wordpress.org/support/topic/integration-with-yoast-seo-video-plugin?replies=1
Loving the Genesis Life!
April 11, 2013 at 11:06 am #34768Posh JohnParticipantI used this jquery plugin a while back and it was quite straightforward...
Thus the heavens and the earth were completed in all their vast array. Genesis 2
April 12, 2013 at 5:40 am #34953rogerpParticipantI have just installed Advanced Fluid Embed plugin but it doesn't seem to be working?
Am I embedding correctly?
http://www.rogerlapin.co.uk/magician-hampshire
This is what I have put in the html
<fve>http://www.youtube.com/embed/q8p8UN9GX9I</fve>
I have tried all variations of the youtube embed but none seem to work?
Thanks
Roger
Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the FutureApril 12, 2013 at 5:50 am #34955DavidFMemberHi Roger,
Use this video link http://www.youtube.com/watch?v=q8p8UN9GX9I not the embed link.
That should do it.
Dave
April 12, 2013 at 5:56 am #34956rogerpParticipantNo still not playing?
Doesn't look as if the plugin is working????
Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the FutureApril 12, 2013 at 5:58 am #34957DavidFMemberCan you give us a link to the page it's on?
Are you using [fve] notice [ ] and NOT <>
Dave
April 12, 2013 at 6:22 am #34960rogerpParticipanthttp://www.rogerlapin.co.uk/magician-hampshire
[fve]http://www.youtube.com/watch?v=q8p8UN9GX9I[/fve]
I am not sure the plugin is working?
Thanks
Roger
Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the FutureApril 12, 2013 at 7:17 am #34965DavidFMemberTry putting it further down the page. It's working fine on my sites.
Dave
April 12, 2013 at 9:43 am #35009rogerpParticipantThanks for your help - I de-activated and activated the plugin and it's working now!
It wouldn't have worked with the < brackets though so thanks for spotting that David
Roger
Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the FutureApril 12, 2013 at 1:24 pm #35063jhguynnMemberHey, this is the first thread I've read since joining the community forum. Sure glad I joined. Thanks for the great tips!
April 12, 2013 at 1:41 pm #35070April 12, 2013 at 1:46 pm #35071rogerpParticipantI have also discovered another reason it was not working for me I was trying to place the code in a text widget and by default you can't run shortcodes in widgets
Need to add this to functions.php
// Use shortcodes in text widgets.
add_filter('widget_text', 'do_shortcode');My site is flying now on PC on the ipad!! Video just moooves to fit. awesome
Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the FutureApril 13, 2013 at 2:35 pm #35254rogerpParticipantI have just put up a new post and the Yoast Video SEO plugin does not see it using Fluid Video Embeds?
Is anyone else using Yoast SEO with Fluid Video Embed successfully?
Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future -
AuthorPosts
- The topic ‘Tip: How to Make Youtube Videos Responsive’ is closed to new replies.