Making embed videos responsive

  • Drew75

    (@drew75)


    10 years, 3 months ago

    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)
  • Thread Starter Drew75

    (@drew75)

    10 years, 3 months ago

    Or would this be a better option?

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

    Evan Herman

    (@eherman24)

    10 years, 3 months ago

    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

    Evan Herman

    (@eherman24)

    10 years, 3 months ago

    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.