CODEWITHSUNDEEP
htmlvimeoembedded-video
Tim
Tim

Reputation: 1

Responsive video size (Vimeo)

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>

Upvotes: 0

Views: 2554

Answers (2)

František Voj&#225;ček
František Voj&#225;ček

Reputation: 174

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.

Upvotes: 0

Omer Huseyin GUL
Omer Huseyin GUL

Reputation: 123

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>

Upvotes: 0

Related Questions