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>

cssvue.jsvimeo-player

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>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

For a brief moment, the light theme flashes before the dark theme takes over

Can someone please help me with this issue? I can't seem to figure out why the dark theme switch is causing a flicker of the default light theme when loading other components. I attempted using v-cloak with CSS, but it didn't resolve the problem. ...

vue.jsvue-component

Aligning the Bootstrap 5 Accordion Button in the Center and Adding Line Breaks

I have a few queries regarding the code I am implementing using Bootstrap 5. JSFiddle How can I center align the header within the button? <button class="accordion-button collapsed text-center" type="button" data-bs-toggle=" ...

htmlcsstwitter-bootstrap

"Error: Unable to access the property '$emit' of an undefined value" - VueJS

I'm currently working on implementing a basic authentication system in vuejs. I have a set of objects containing valid usernames and passwords. I am looping through this list to validate the entered username and password. If there is a match, I trigge ...

javascriptauthenticationvue.js

Paused session in web development

Currently, I am in the process of building a website using HTML and CSS and have encountered an issue. Within my CSS file, I have defined an ID called "full" which sets a wooden background after the sidebar and is intended to span across the entire page. A ...

htmlcssclass

Personalizing Material-UI's select component: A step-by-step guide

Desired Outcome: https://i.stack.imgur.com/khNHn.png https://i.stack.imgur.com/dQzVz.png Progress So Far: https://i.stack.imgur.com/CUixn.png Struggling to Position SVG Icon Next to Text: https://i.stack.imgur.com/4GFtA.png Issue with Black Line Whe ...

csscustomizationmaterial-ui

Customizing the date format in Vuetify's Datepicker

I am currently using a Vuetify Datepicker component in my project: <v-menu v-model="menu1" :close-on-content-click="false" max-width="290" > <template v-slot:activator="{ on }"> <v-text-field v-model="editedItem. ...

vue.jsvuetify.js

With Vue 3 Pinia, values fetched from an API within a Pinia store cannot be statically assigned; they will always be reactive

I have a frontend built with vue3 and using pinia as the store. I am setting it up as shown below: export const useShopStore = defineStore( "shop", () => { const state = reactive({ data: { fruits: [], owners: [] ...

vue.jsvuejs3pinia

The Workbox cache is not employed by the <img /> tag

Initial Setup "workbox-cdn": "^5.1.4", "nuxt": "^2.15.2" Situation Overview In my application, Pictalk, users can save and access pictograms. Each user has a personalized set of pictograms. Currently, the app only ...

vue.jscachingprogressive-web-appsworkboxnuxtjs

Is it possible to partially move the image outside of the MUI dialog?

Is it possible to move an image partially outside of the MUI dialog, with the bottom part inside and the top part outside the dialog? I attempted a solution found on Stack Overflow but it did not yield the desired result. This is the dialog code: <Dial ...

htmlcssmaterial-ui

Struggling to comprehend the filtering arguments in VueJS?

While going through the VueJS Filter(orderby) API documentation, I came across some confusion regarding the arguments. Below is a sample for reference: Arguments: {String | Function} targetStringOrFunction "in" (optional delimiter) {String} [...s ...

javascriptvue.js

Using `v-if` with a Vuex getter

Currently, I am utilizing a vuex getters called isLoggedIn to verify whether a user is logged in or not. <div v-if="isLoggedIn" class="ml-2 py-2 group relative">...</div> data() { return { isLoggedIn: this.$store. ...

javascriptvue.jsvuex

Utilizing jQuery for animating SVG elements with dynamic color changes and scaling effects upon hover

Seeking assistance from coding experts! I have created an icon and am attempting to modify it so that the color changes when hovered over. Additionally, I want the white square to scale down by 50% starting from the top-left corner of its current position. ...

javascriptjqueryhtmlcsssvg

Incorporate a font-awesome icon directly within the input field

My div element contains a span element, which in turn includes an i tag. However, the i element extends outside of both the span and div elements. I am attempting to place an eye icon inside an input field. Here is my current code - what adjustments shou ...

htmlcss

The JQuery CSS function is unable to alter the height of the element

I am working with a grid that contains various elements, each with the class item. When I click on one of these elements, I toggle the class expand to resize the element. <body> <div class="grid"> <a href="#"> < ...

javascriptjqueryhtmlcssheight

What is the best way to align a logo in a log-in screen?

I am having an issue with centering the logo on my login form. The "signin" text is centered perfectly, but the logo always stays at the top left corner. I don't understand why the logo is not centered. If anyone has a solution to propose, I would gre ...

css

Develop a Vue.js component embedded within another component to manipulate data stored in the parent

After reviewing a few answers that partially address my question, I realized there is more to explain. In our Laravel project website layout, we utilize a global #app div. This means all pages share the same main Vue instance, prompting me to segregate ke ...

javascriptvue.js

What is the best way to adjust the size of a button using CSS within a ReactJS

I am facing an issue where I need to create a button with a specific width, but the template I'm using already has predefined styles for buttons. When I try to customize the button's style, nothing seems to change. Below is the code snippet: Her ...

javascriptcssreactjs

Tips for transforming a menu into a dropdown menu

Is there a way to convert the current menu into a Dropdown menu? Currently, the menu is not collapsing and it keeps opening. Any suggestions on how to achieve this? Here is an example for reference: https://i.stack.imgur.com/2X8jT.png ar ...

phphtmlcssyii

Toggling a div updates the content of a different div

I am looking to make the content within <div class="tcw-content"> dynamically change when a different div is clicked. I have little experience with Ajax, so I'm wondering if there are alternative ways to accomplish this using JS/CSS. If anyone h ...

javascripthtmlcssajax

It is important for the button size to remain consistent, regardless of any increase in text content

My goal was to keep the button size fixed, even as the text on it grows. This is the current code I am using: .button { border: none; color: white; padding: 10px 50px; text-align: center; text-decoration: none; display: inline-block; font ...

javascripthtmlcss