Responsive video size (Vimeo)

Question

Responsive video size (Vimeo)

1.8k views Asked by Tim At 01 August 2021 at 12:03

I am embedding a video (from Vimeo) onto my survey. I am using the embed code from Vimeo which is responsive. It looks great when viewing on my mobile, however when viewing on my laptop it takes up the entire screen.

Is there a way keep it responsive so that when viewed on mobile it stays the same size, but when on laptop it is half the size?

This is the responsive embed code from Vimeo that I am using:

<div style="padding:56.25% 0 0 0;position:relative;"><iframe src="https://player.vimeo.com/video/581420395?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;" title="Neck Flexion Test"></iframe></div><script src="https://player.vimeo.com/api/player.js"></script>

Fixed Embed Code:

<iframe src="https://player.vimeo.com/video/581420395?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" width="1920" height="1080" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen title="Neck Flexion Test"></iframe>

Original Q&A

There are 2 answers

**František Vojáček** · Answer 1 · 2021-08-01T12:29:52+00:00

Anytime specific types of devices need to be targeted, @media queries will do so. Styles of laptop devices can be applied with

@media screen and (min-width: 992px)

^{This is not an accurate integration. Sizes of screens vary. How to choose breakpoints?}

I highly recommend removing properties from the style attribute.

Both inline styles and !important are considered very bad practice, but sometimes you need the latter to override the former.
_{MDN Web Docs | Specifity}

.video
{
  position: relative;
  padding: 56.25% 0 0 0;
}
.video iframe
{
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media screen and (min-width: 992px)
{
  .video iframe
  {
    width: 50%;
  }
}

<div class="video">
  <iframe src="https://player.vimeo.com/video/581420395?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen title="Neck Flexion Test">
  </iframe>
</div>
<script src="https://player.vimeo.com/api/player.js"></script>

Interactive Code

^{Code design is Mobile-first. More information about Using media queries.}

**Omer Huseyin GUL** · Answer 2 · 2021-08-01T12:47:27+00:00

Responsive design is the change of objects according to the height and width of the devices. @media screen is used for responsive design in HTML text markup language. And this code takes 2 parameters for max height and max width. If the height and width are reached within the specified limits, the code block you have written will work and your web page will switch to the new design.

Instead of using an iframe tag in style blocks, you can give different properties to other iframe objects if you give the iframe tag an id and use it.

<style>
    #vimeo {
        width: 100%;
    }
    
    @media screen and (min-width: 1000px) {
        #vimeo {
            width: 50%;
        }
    }
    
    @media screen and (min-width: 400px) {
        #vimeo {
            width: 25%;
        }
    }
</style>

    <body>
    <div style="padding:56.25% 0 0 0;position:relative;"><iframe id="vimeo" src="https://player.vimeo.com/video/581420395?badge=0&amp;autopause=0&amp;player_id=0&amp;app_id=58479" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen style="position:absolute;top:0;left:0;width:100%;height:100%;"
            title="Neck Flexion Test"></iframe></div>
    <script src="https://player.vimeo.com/api/player.js"></script>

</body>

TechQA.

Responsive video size (Vimeo)

There are 2 answers

Related Questions in HTML

Related Questions in VIMEO

Related Questions in EMBEDDED-VIDEO

Popular Questions

Popular Tags

Trending Questions