WordPress.org

Support

Support » How-To and Troubleshooting » Making embed videos responsive

Making embed videos responsive

  • We have several videos on our website that are hosted with Vimeo, however, none of them are responsive for tablets and smart phones. I was told by one of the staff members at Vimeo that they don’t provide responsive embed code, but that several of their users have expressed the same and found success by using Javascript.

    I found this when doing a search (http://coolestguidesontheplanet.com/videodrome/vimeo/), but I’m not exactly sure how to make it work with my WordPress pages. Any ideas?

Viewing 3 replies - 1 through 3 (of 3 total)
  • Or would this be a better option?

    http://wordpress.org/plugins/responsive-video-embeds/

    Hi Drew,

    When implementing and embedding YouTube videos into sites I have developed for clients, I have gone with the FitVids.js javascript library. Very simple to implement and begin using, and its widely supported. Check it out and have a look at some of the base code:

    http://fitvidsjs.com/

    If your trying to stay away from enqueueing another javascript library, you can achieve this with pure CSS using a method like this:

    HTML MARKUP

    <div class="js-video [vimeo, widescreen]">
      <iframe width="560" height="315" src="http://www.youtube.com/embed/wN3gueLT0D8?showinfo=0" frameborder="0" allowfullscreen></iframe>
    </div>

    CSS MARKUP

    .js-video {
      height: 0;
      padding-top: 25px;
      padding-bottom: 67.5%;
      margin-bottom: 10px;
      position: relative;
      overflow: hidden;
    }
    
    .js-video.widescreen {
      padding-bottom: 57.25%;
    }
    
    .js-video.vimeo {
      padding-top: 0;
    }

    I hope this helps!

    -Evan

    Sorry I neglected to include a reference for this post. If you want to read up further, I pulled this information from:

    http://blog.jon.sh/responsive-youtube-vimeo-embed-and-html5-video-with-css

    Evan

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Making embed videos responsive’ is closed to new replies.
Skip to toolbar