Ensuring optimal display with adaptable video dimensions

I am attempting to adjust the size of an embedded Vimeo video on a web page. Currently, the video is responsive, and I would like to maintain its responsiveness. However, it appears too large on the desktop version of the website (mobile size looks good). How can I make it smaller?

.video_wrapper {
    position: relative;
    padding-bottom: 56.25%;
}

.video_wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
<div class="video_wrapper">
    <iframe src="https://player.vimeo.com/video/24799548" width="700" height="525" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>

Thank you for your help!

htmlcssvideohtml5-video

Answer №1

To adjust the dimensions, simply modify the width and height values in this code snippet:

.video_wrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

For instance, you can change the values to 90%.

Answer №2

You might want to try this out:

.video_container iframe {
    width: 70%;
    height:70%;
    margin: auto;
    padding: 0;
    background-color: transparent;
    overflow: hidden;
}

I've added a transparent background and set the margin to auto to keep it centered.

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

The color attribute enhances the appearance with a colored border specifically designed for Chrome users

Starting off, I appreciate the border that Chrome applies to my inputs. However, I am facing an issue with the textarea element. The problem is that the textarea uses the color attribute not only for coloring the text but also as the border color. Here is ...

cssgoogle-chrome

What is the best way to achieve consistent width in a material-ui card component?

How can I ensure that all these cards have the same width? https://i.stack.imgur.com/Ns3zw.png I'm experiencing an issue with achieving uniform card widths when using flexbox in material-ui. How can I resolve this? Is it necessary to utilize Grid fo ...

cssreactjsflexboxmaterial-ui

"Encountering issues while upgrading Polymer project version from 0.5 to 1.0

I am in the process of upgrading my project from polymer .5 to polymer 1.0. After installing the new version of the polymer library, iron element, and paper element, I encountered the following error: polymer-micro.html:63 Uncaught TypeError: prototype ...

javascripthtmlvisual-studio-2012polymernuget-package

Fix the positioning of a div in BootStrap and CSS code

Hey there, I'm relatively new to CSS/Bootstrap and currently in the process of learning. I might need to incorporate some CSS into the "chat_funcs" div, but unsure about what code to input to achieve my desired outcome. The issue at hand: What I am ...

htmlcsstwitter-bootstrap

HTML5: Enhancing Video Playback on the iPad with Custom Zoom Controls

I've customized a smaller UIWebView specifically for the iPad, and I've created my own HTML5 controls for the video playback. However, when I try to maximize the video, all I see is a black screen instead of the actual content. The audio still pl ...

javascriptcssipadhtml

"Trouble encountered when attempting to add a CSS class to a select option in Firefox version 5

Here is the HTML code I am working with: <select id="WageBenifits_PayType" name="WageBenifits.PayType"> <option class="selectOption" value="" selected="selected">Please Select Value</option> <option value="COM">COM - COMMIS ...

htmlcssfirefox

MDL Tab loading Problem

When visiting my website at this link, which is powered by MDL from Google, there is a troublesome issue that occurs. The #harule tab briefly appears before disappearing. This tab should actually be hidden on the page until a user clicks on the harule tab ...

javascriptjqueryhtmlcss

What is the method for inserting or passing a city value as a result into the input field with the value attribute set

This code is functioning properly, but the city it generates needs to be registered in #city How can I pass the value #city into an input field? value="cityname" <input id="city" name="input" value="cityname" /> <script> $(document).read ...

javascriptjqueryhtmlcss

Struggling to locate the distinctive XPath for the button

I am facing a situation where the XPath is non-unique and identifies 3 elements on the page that change positions upon refresh: <div class="col-xs-12 Hover"> <button data-testid="continueCheckoutButton" ng- class="continueDellMetricsC ...

htmlseleniumxpath

The main menu vanishes when you hover over it after the affix class is activated

I am currently working on creating a horizontal dropdown menu that expands on mouseover and collapses on mouseout under one of the main menu items. The functionality of this effect is working fine, except for one issue. When I scroll down and activate the ...

jqueryhtmlcss

To switch to desktop mode, double click; for mobile view, just tap once

I am looking to implement 2 different gestures for a specific feature in my application. Ideally, I want users to be able to double click on a card to open it in desktop view, but if they are using a phone, a single tap should suffice. How can I achieve th ...

cssreactjstypescriptmaterial-ui

The Syntax of 2D Transformations

I am currently attempting to apply multiple animations on a single element simultaneously. While I have successfully managed to use the translate property to adjust the element's coordinates, I am encountering difficulties in expanding its height and ...

htmlcss

I am looking to position two divs within a parent div so that they are aligned either to the bottom or to the left/right

I have come across this code snippet HTML <div class="head"> <div class="menu"> </div> <div class="search"> </div> </div> CSS .head { height:110px; position:relative; } .menu { ...

htmlcsspositionalignment

Rejuvenate a just-launched window.open starting from the about:blank

After receiving data from an ajax result, I am trying to open a pdf in a new window. However, the pdf viewer is only displayed if I manually resize the window (using manual hotspot resizing). How can I ensure that the contents display properly in its popu ...

javascripthtmlajaxwindow

Why aren't my IE conditional statements functioning correctly within the style tags?

I'm experimenting with IE specific conditional statements to adjust class settings depending on the browser type. Initially, I thought they had this capability, but I can't seem to make it work. Here is a basic example: if the browser is IE, the ...

htmlcssconditional-statements

Using JavaScript to create temporary drawings on a webpage that automatically erase themselves

I am curious about how to achieve a scribble effect that self-erases, similar to what is seen on this website: Example: Thank you! I have come across some similar scripts, but I am struggling to understand how to make the scribble disappear after a few ...

javascripthtmlcss

How can I use D3.js to form a circular group in an organization structure, link it with a circular image, and connect

Is it possible to create a radial grouped circle using d3.js, similar to the image below: https://i.sstatic.net/1Hwd2.jpg I have written some code as shown below. However, I am facing challenges in connecting every circle with a curved line and displayi ...

javascriptcssd3.jssvg

Creating a Phonegap hybrid application that uses JavaScript redirection can cause an absolute positioned element to intermittently blink, revealing the content that lies

Currently, I am developing a Cordova project for both iOS and Android platforms. Within my project, I have two main pages: index.html and home.html. Each page contains an absolute positioned div (with loading feature) that is visible by default. Here is t ...

javascriptjqueryioscsscordova

Clear function of signature pad not working inside Bootstrap modal dialogue box

Currently, I'm working on implementing a signature pad dialogue box using Bootstrap modal. When the user clicks on the "Complete Activity" button, a dialog box should pop up with options for yes or no. If the user selects yes, another dialog box shoul ...

htmlangulartypescriptbootstrap-modal

Leveraging the power of beautifulsoup and selenium for web scraping on a multi-page site results in gathering a

I am in the process of scraping text from a website iteratively. Each page on this particular website follows the same html structure. I utilize selenium to go to the next page each time I add the following strings: text_i_want1, text_i_wantA, text_i_wantB ...

htmlpython-3.xseleniumbeautifulsoupslice