Tip: How to Make Youtube Videos Responsive

Community Forums Forums Design Tips and Tricks Tip: How to Make Youtube Videos Responsive

This topic is: not resolved

This topic contains 33 replies, has 15 voices, and was last updated by  Dan B 1 year, 2 months ago.

Viewing 15 posts - 1 through 15 (of 34 total)
  • Author
    Posts
  • #34031

    AC
    Blocked
    Post count: 7712

    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:

    [html]<div class="video">YOUTUBE VIDEO CODE</div>[/html]

    Then you need to add in the CSS to the video class:

    [css].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%;
    }[/css]

    #34097

    rick4him
    Participant
    Post count: 128

    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.

    #34139

    AC
    Blocked
    Post count: 7712

    I think the problem might be adding the “DIV and Class” but I can’t say for sure.

    #34158

    weslinda
    Participant
    Post count: 193

    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!

    #34252

    DavidF
    Participant
    Post count: 36
    #34494

    CharlieL
    Participant
    Post count: 24

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

     

     

    #34631

    crazymikesapps
    Participant
    Post count: 6

    @ 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

    #34667

    weslinda
    Participant
    Post count: 193

    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!

    #34768

    Posh John
    Participant
    Post count: 42

    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

    #34953

    rogerp
    Participant
    Post count: 47

    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

    #34955

    DavidF
    Participant
    Post count: 36

    Hi Roger,

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

    That should do it.

    Dave


    #34956

    rogerp
    Participant
    Post count: 47

    No still not playing?

    Doesn’t look as if the plugin is working????

    #34957

    DavidF
    Participant
    Post count: 36

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

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

    Dave


    #34960

    rogerp
    Participant
    Post count: 47

    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

    #34965

    DavidF
    Participant
    Post count: 36

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

    Dave


Viewing 15 posts - 1 through 15 (of 34 total)

You must be logged in to reply to this topic.