Adjust the size of the Vimeo video to fit the container dimensions and eliminate any black bars

Is there a way to eliminate the black bars that are present in the vimeo video which has been embedded? Below is the link to the code snippet. JSFiddle Link

<div class="embed-container">
<iframe src="https://player.vimeo.com/video/86019637?title=0&amp;byline=0&amp;portrait=0&amp;color=ffffff&amp;autoplay=1" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>


iframe{
width:570px;
height:250px;
}

Currently, there are black bars on the left and right sides of the video. The goal is to find a solution to remove these black bars while maintaining the aspect ratio. I am not very tech-savvy, so any easy-to-follow guidance would be greatly appreciated. Thank you.

htmlcssruby-on-railsvimeo

Answer №1

To achieve a responsive design, you can utilize the CSS properties height and width with the unit vh like so:

.embed-container {
  width: 570px;
  height: 250px;
}

iframe {
  width: 100%;
  height: 100vh;
}

When working with videos, it's important to consider their aspect ratio in order to maintain the proper visual appearance. By setting the height of the iframe to 100vh, the video will fill the screen without any distracting black bars appearing.

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

Sliding panel for horizontal overflow

Currently, I am developing a web animation GUI that requires a sliding timeline area similar to this example: With a starting time of 0, there is no need to slide to negative times, but the ability to zoom in and slide side to side to view the entire time ...

javascriptjquerycsstwitter-bootstrap

Tips for toggling the visibility of a flexbox-styled popup using jQuery

I am trying to implement a popup on my website and I want to use flexbox styling for it. I have the necessary scss mixins for flexbox properties, however, I encountered an issue. The problem arises when I try to hide the popup using display: none, as the ...

javascriptjqueryhtmlcssflexbox

Concealing a child component when hovering over its parent element with styled-components

I have a react component structured like this - const MyComponent = () => ( <ContainerSection> <DeleteButtonContainer> <Button theme="plain" autoWidth onClick={() = ...

javascriptcssreactjsstyled-components

The buttons are not resizing to fit the entire table cell

I'm currently working with Bootstrap 4 and trying to place buttons in a table cell for each row. However, the buttons are not expanding to fill the available space and appear squished. This issue persists even when I switch to mobile view. From the p ...

htmltwitter-bootstrapbootstrap-4

Compile an ASP.NET website into static files such as HTML, CSS, and JavaScript prior to deployment

Can a simple ASP.NET website without ASP webform or .NET controls be precompiled into static files such as HTML, CSS, and JavaScript? I am interested in utilizing the master page feature and Visual Studio IDE intellisense while still being able to deploy ...

asp.netasp.net-mvcvisual-studio-2010html

Placing a JavaScript button directly below the content it interacts with

I am currently working on a button that expands a div and displays content upon clicking. I am facing an issue where I want the button to always be positioned at the bottom of the div, instead of at the top as it is now, but moving it within the parent div ...

javascriptjquerycss

What is the best method for restricting the visibility of an animation to specific regions within an SVG?

I am seeking assistance with adding a "shine" animation to my SVG. I want the animation to only appear within specific parts of the SVG, but I'm uncertain about how to achieve this. Below is what I have accomplished so far. The aim is for the white ...

htmlcssanimationsvg

The image fails to reach full width and does not expand correctly when I zoom out

At the bottom of my website, I have a bar for displaying certain content. However, I am facing an issue where the bar is not extending to cover the entire screen width despite having code in place to do so. The HTML code is quite basic: <div class="bo ...

htmlcssimagewidth

Show one line of text at a time with a pause in between each one

On my HTML page, I am looking to showcase text lines in succession with a delay. The unique condition is that when the second line appears, the color of the first line should change. Then, as the third line emerges, the color of the second line should also ...

jqueryhtmlcssjquery-plugins

Tips for increasing the complexity of your bottom-line animation

Hello everyone, I am currently learning the basics of CSS and have a question about a specific animation effect. Please bear with me if this type of inquiry is not suitable for StackOverflow. In my index.html file, I have the following code: <n ...

htmlcss

Is there a way to ensure that all images are uniform in size and aligned in a row?

I have an upcoming exam covering various topics that the teacher and I worked on together today, with the exception of the photo tab. The teacher instructed me to submit it within a few days, completed in full. I have independently completed everything o ...

htmlcss

The current issue with this javascript function is that it is failing to produce any output

function calculateOverallCGPA() { let cumulativeGPA = 0.00; for (let i = 1; i <= semNum; i++) { const GPAforOneSubject = parseFloat(getElementById(`subs${i}`).value); cumulativeGPA += GPAforOneSubject; } const finalCGPA = ...

javascripthtmlfunction

What could be causing my JavaScript try/catch block to not trigger?

I'm having trouble getting any code within my function to execute unless I completely comment out the try/catch block. Why could this be happening? I've tried adding code before and after the try/catch, as well as within each block, but nothing s ...

javascripthtmlfunctiontry-catch

Storing JavaScript Array for Future Use in a Separate File

Trying to clarify my question: I'm working with two files: number-crunching.js and chart.html. The number-crunching.js file contains a JSON object: var data = [ { "mother": "Ellen", "father": "Bob", "pet": "cat", "age":50, "hairLength":10 ...

javascriptjqueryhtmlarraysjson

Conceal form upon submission with jQuery

Is it possible to have a html form inside a table and then hide it once the form is submitted? The Form: <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <tr> <td colspan="3"> <h ...

javascriptjqueryhtml

What impact does the margin have on the alignment of my inline-block divs at the top using flex-start?

Embarking on my journey with CSS and HTML, I am eager to enhance my understanding. While attempting to align 3 divs in an inline block at the top of the flexbox section, I expected "align-items: flex-start;" to work, but unfortunately, the divs did not re ...

htmlcsslayoutflexboxvertical-alignment

Angular 2: Issue with disabled functionality not functioning correctly

In my TypeScript code, I have created a boolean variable called readOnlyMode. When this variable is set to true, all elements should be disabled. To achieve this, I am using [disabled]="readOnlyMode" in the HTML for elements that need to be disabled. Howev ...

htmlangulartypescript

Glyphicons are not functioning properly

I've been trying to use the bootstrap-cosmo.css v3.3.7 file which contains the glyphicon -glyphicon-duplicate .glyphicon-duplicate:before { content: "\e224"; } However, when I try to use it, the icon doesn't show up. <a class="btn btn- ...

cssasp.net

Styling the day items of an AngularJS datepicker

I am interested in implementing the datepicker feature from http://angular-ui.github.io/bootstrap/#/datepicker. In addition, suppose I have a list of events for a specific date, like 12th January. Would it be possible to change the color of that particul ...

cssangularjsdatepicker

Place the sorting image on the left side of the DataTable header

I am currently using DataTable in my code. The sorting images in the header of the table are on the right side while the labels are on the left, as shown below: https://i.sstatic.net/Bz6EO.jpg However, I would like to switch this arrangement and have the ...

jqueryhtmlcssdatatables