Skip to:
Content
Pages
Categories
Search
Top
Bottom

Making Youtube videos responsive

Viewing 8 replies - 1 through 8 (of 8 total)
  • Avatar of flyveren
    flyveren
    Participant

    @flyveren

    you can do it with some css ;)

    .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
    }

    .video-container iframe,
    .video-container object,
    .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    Avatar of flyveren
    flyveren
    Participant

    @flyveren

    Avatar of flyveren
    flyveren
    Participant

    @flyveren

    div class=”video-container”
    iframe src=”http://www.youtube.com/embed/dFVxGRekRSg” frameborder=”0″ width=”560″ height=”315″ /iframe
    /div

    Avatar of notpoppy
    notpoppy
    Participant

    @notpoppy

    @flyveren Is it possible to make this work without using a div container? The problem is when users post video embeds in my forum they won’t know to add that extra code.

    Avatar of @ubernaut
    Ben Hansen
    Participant

    @ubernaut

    i think that’s actually more of a theme thing if the container is responsive then the oembeds should also respond. are you maybe not using oembeds?

    http://codex.wordpress.org/Embeds

    Avatar of notpoppy
    notpoppy
    Participant

    @notpoppy

    @ubernaut Yes I am using oEmbed. In the default Buddypress theme oEmbeds don’t seem to be responsive so I’m trying to find the best way of doing that. Am having a look at FitVids at the moment as suggested here:

    http://buddypress.org/support/topic/fitvids-js-and-bp-ajax/

    Avatar of @ubernaut
    Ben Hansen
    Participant

    @ubernaut

    oh hum the default theme maybe you should a open trac ticket on that one? i believe its still being supported even though theme compatibility is the preferred method. anyone know off hand if the BP default theme still comes packaged? haven’t really done a fresh buddypress install since 1.7.

    Avatar of workinclasshero
    workinclasshero
    Participant

    @workinclasshero

    You dont need to wrap these with a div. To make YouTube responsive just use the same styling you would to make images responsive.

    Here’s what I used on the default theme for buddypress

    iframe, video, img {
      max-width: 100%;
      min-height: auto;
    }

    The “min-height:auto” which is usually just “height:auto” for images I used because the videos were being pushed really flat. This fixed that problem and the videos don’t look the best on small phones but at least now they are viewable.

Viewing 8 replies - 1 through 8 (of 8 total)

You must be logged in to reply to this topic.