Tip: How to Make Youtube Videos Responsive

[AnitaC]

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%;
}

---

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

[rick4him]

I 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.

[AnitaC]

I think the problem might be adding the "DIV and Class" but I can't say for sure.

---

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

[weslinda]

Great 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!

[DavidF]

I use Fluid Video Embeds which works great.

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

Dave

---

David Frosdick WordPress Coaching

[CharlieL]

Thank you guys for sharing!
Good to know the options.

 

 

[crazymikesapps]

@ 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

[weslinda]

Mike, 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!

[Posh John]

I used this jquery plugin a while back and it was quite straightforward...

http://fitvidsjs.com/

---

Thus the heavens and the earth were completed in all their vast array. Genesis 2

[rogerp]

I 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&gt;

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 Future

[DavidF]

Hi Roger,

Use this video link http://www.youtube.com/watch?v=q8p8UN9GX9I not the embed link.

That should do it.

Dave

---

David Frosdick WordPress Coaching

[rogerp]

No 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 Future

[DavidF]

Can you give us a link to the page it's on?

Are you using [fve] notice [ ] and NOT <>

Dave

---

David Frosdick WordPress Coaching

[rogerp]

http://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 Future

[DavidF]

Try putting it further down the page. It's working fine on my sites.

Dave

---

David Frosdick WordPress Coaching

[rogerp]

Thanks 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 Future

[jhguynn]

Hey, this is the first thread I've read since joining the community forum.  Sure glad I joined.  Thanks for the great tips!

[AnitaC]

Welcome @jhguynn! Glad to have you here.

---

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

[rogerp]

I 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

http://www.rogerlapin.co.uk

 

---

Roger
https://www.rogerperkin.co.uk/
Check out my Network Automation Training – Training the Network Engineers of the Future

[rogerp]

I 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

[Author]

Posts