An iframe for the Vimeo player set to 100% of

Question

An iframe for the Vimeo player set to 100% of

I encountered some challenges while styling the Vimeo video I embedded. Here is the player I am using: I want the player to occupy the entire screen for all viewport sizes, so I applied min-width: 100vh and min-height: 100vw.

I was able to adjust the width of the player with the following code:

::v-deep iframe {
    min-width: 100vw;
    min-height: 100vw;

    .player {
      width: 100vw;
      height: 100vh;
    }

}

But the min-height property didn't work as expected. Does anyone know how to resolve this issue?

Edit: This is the code snippet that I have currently:

body {
background-color: yellow;
padding: 0;
margin: 0;
}
.container {
 height: 100vh;
 width: 100vw;
 display: flex;
 align-items: center;
 justify-content: center;
 overflow: hidden; 
}
iframe {
  min-width: 100vw;
  min-height: 100vw;
}

.player {
 width: 100vw;
 height: 100vh;
}

<div class="h-screen flex items-center justify-center overflow-hidden">
   <iframe id="player1" src="https://player.vimeo.com/video/76979871" width="630" height="354" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

</div>

css vue.js vimeo-player

Answer 1

Answer №1

If the viewport is narrower than the video's aspect ratio, the video should occupy the full height of the viewport and any excess width should be cropped. In this case, the video is centered horizontally.

Conversely, if the viewport is wider than the video, the video should expand to fill the entire width while being cropped at the top and bottom.

This snippet utilizes a basic container for the video with an inherent aspect ratio. The aspect ratio can be adjusted to match the specific video to be played or determined dynamically using JavaScript during loading time. It calculates the necessary dimensions based on the relative aspect ratios of the device and the video.

body {
  overflow: hidden;
}
.container {
     --videoRatio: calc(16 / 9); /* UPDATE THIS FOR DIFFERENT VIDEOS */
    background-color: yellow;
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    }
    /* Initially assuming that the viewport's width allows the video to take up full width; setting minimum height to 100vh */
iframe {
    padding: 0;
    margin: 0;
    position: relative;
    --w: 100vw;
    --h: calc(var(--w) / var(--videoRatio));
    height: var(--h);
    width: var(--w);
    top: calc(50% - (var(--h) / 2));
    left: 0;
    width: var(--w);
    height: var(--h);
}
    /* Handling maximum aspect ratio */
@media (max-aspect-ratio: 16/9) {/*when the viewport is too narrow for displaying the full video */
  iframe {
    --h: 100vh;
    --w: calc(var(--h) * var(--videoRatio));
    top: 0;
    left: calc(50% - (var(--w) / 2));
  }
}

<body>
    <div class="container">
       <iframe id="player1" src="https://player.vimeo.com/video/76979871" frameborder="0"></iframe>
    </div>
</body>

Answer 2

If the viewport is narrower than the video's aspect ratio, the video should occupy the full height of the viewport and any excess width should be cropped. In this case, the video is centered horizontally.

Conversely, if the viewport is wider than the video, the video should expand to fill the entire width while being cropped at the top and bottom.

This snippet utilizes a basic container for the video with an inherent aspect ratio. The aspect ratio can be adjusted to match the specific video to be played or determined dynamically using JavaScript during loading time. It calculates the necessary dimensions based on the relative aspect ratios of the device and the video.

body {
  overflow: hidden;
}
.container {
     --videoRatio: calc(16 / 9); /* UPDATE THIS FOR DIFFERENT VIDEOS */
    background-color: yellow;
    padding: 0;
    margin: 0;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    position: relative;
    }
    /* Initially assuming that the viewport's width allows the video to take up full width; setting minimum height to 100vh */
iframe {
    padding: 0;
    margin: 0;
    position: relative;
    --w: 100vw;
    --h: calc(var(--w) / var(--videoRatio));
    height: var(--h);
    width: var(--w);
    top: calc(50% - (var(--h) / 2));
    left: 0;
    width: var(--w);
    height: var(--h);
}
    /* Handling maximum aspect ratio */
@media (max-aspect-ratio: 16/9) {/*when the viewport is too narrow for displaying the full video */
  iframe {
    --h: 100vh;
    --w: calc(var(--h) * var(--videoRatio));
    top: 0;
    left: calc(50% - (var(--w) / 2));
  }
}

<body>
    <div class="container">
       <iframe id="player1" src="https://player.vimeo.com/video/76979871" frameborder="0"></iframe>
    </div>
</body>

An iframe for the Vimeo player set to 100% of

Answer №1

Similar questions

Modify the `div` content based on the selected items from the bootstrap dropdown menu

Tips for breaking out of an infinite loop while loading HTML containing a carousel into a blank <div> within another HTML file using jQuery's $(document).ready() function

Using JavaScript in PHP files to create a box shadow effect while scrolling may not produce the desired result

Disregard the CSS styling within the modal window

When I navigate to the About page in Vue, the data is automatically cleared

What could be causing my jQuery to malfunction after I include the .sqrt() function?

Conflicts arising from hyphenating attributes in Vue with version 3.4 overlapping with same-name shorthand properties

Encountering a warning message in Vue 3 Migration Build using Typescript: Error in finding export 'default' (imported as 'Vue') within the 'vue' package

Creating a fresh CSS class and utilizing its properties in JavaScript is the task at hand

Is it possible to stack navbar items in CSS?

Can a Vue component in SFC form be utilized as a mixin?

Is it possible to implement the SCSS CSS preprocessor in Angular 1.6.6, even though it is already utilizing LESS as the current CSS preprocessor?

CSS: Unexpected value, received NaNrgb

Perform a function within another function in Vue

Is it common for content to duplicate when using the 'position: fixed' property in CSS media print?

Eliminate the AM and PM options from the input time selection dropdown menu in HTML

Securing Your Laravel and Vue Application with Sanctum: Handling Unauthenticated Users

Gap in footer spacing on Internet Explorer is significantly large

"Using Javascript to assign a class based on a date being greater than

Ways to update the DOM once a function has been executed in VUE 3 JS