Making Vimeo videos responsive for mobile

  • I noticed that Vimeo video embeds are not responsive. They look fine on a desktop monitor but on a tablet or phone they do not shrink down, the video extends off to the right side. I saw another post here (now closed) that suggested wrapping the video iframe in this code:

    <div class="embed-responsive embed-responsive-16by9">
 <iframe src="https://openload.co/embed/60H9sHz72N8/" scrolling="no" frameborder="0" width="720" height="480" allowfullscreen="true" webkitallowfullscreen="true" mozallowfullscreen="true"></iframe>
</div>

    However, I was wondering if there is an easier way to do this, like adding CSS or PHP code once somewhere so that it performs the effect globally on every video. I already have a bunch of Vimeo videos and it would be a pain to add the new code to each post, and also to add it to every future post.

    By the way, YouTube videos appear to be resizing OK. Only Vimeo videos are giving me this problem. I don’t have a site online you can check right now to see this but if you try adding a Vimeo video to your own .Tube site you might see the problem.

    Thanks!

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

  • How are you putting the video in the post?

    The “correct” way is to simply put the URL to the video inside the post body…

    https://vimeo.com/181696349

    … NOT the Vimeo iframe / embed code.

    <iframe src="https://player.vimeo.com/video/181696349" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
<p><a href="https://vimeo.com/181696349">&mdash;disorderly conduct&mdash;</a> from <a href="https://vimeo.com/gabrielreuben">Gabe Reuben</a> on <a href="https://vimeo.com">Vimeo</a>.</p>

    This is tested and working on a number of sites with the TUBE theme.

    Please give it a shot.

    • This reply was modified 6 years, 11 months ago by toddlevy.
    • This reply was modified 6 years, 11 months ago by toddlevy.
    Thread Starter videosc

    (@videosc)

    Thanks! This solution works although I prefer using the Vimeo embed option because I can remove all the extra data like video title, author, byline, etc. If there is another way to use Vimeo iframes while also controlling the size on mobile that would be great.

    I guess I’ll use toddlevy’s method for now but will leave this topic open in case another solution comes up.

    The TUBE Video Curator has a lot of settings to control that stuff.

    https://www.ads-software.com/plugins/tube-video-curator/

    Iframely may also allow for more control…

    https://iframely.com/

    TL

    P.S. As the original reply solved your issue, I’d kindly ask you to mark this as resolved.

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Making Vimeo videos responsive for mobile’ is closed to new replies.

Tags