WordPress.org

Forums

Making embed videos responsive (4 posts)

  1. Drew75
    Member
    Posted 1 year 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?

  2. Drew75
    Member
    Posted 1 year ago #

    Or would this be a better option?

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

  3. Evan Herman
    Member
    Posted 1 year 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

  4. Evan Herman
    Member
    Posted 1 year 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

Topic Closed

This topic has been closed to new replies.

About this Topic