Changing the Size of a Youtube Video Based on the Width of a DIV Element

When embedding a Youtube video iframe, it is important to ensure that it scales according to the width of the containing div. The width of the div can vary depending on the layout of the page snippet.

The aspect ratio of the Youtube video is 560/315, width/height.

In my attempts, I noticed that the height of the Youtube iframe is too short, causing the thumbnail to be cropped.

However, upon closer inspection, it seems that it is actually the thumbnail that is cropped. Once the video is played, the aspect ratio adjusts accordingly...

But the video appears too narrow and tiny because it is constrained by the height of the iframe container, which is too short.

This issue has been observed on the latest versions of Firefox and Chrome.

Are there any recommendations on how to adjust the display to ensure the video maintains the correct aspect ratio within the container div?

For reference, please visit https://codepen.io/iamalta/pen/MMwwwK

Video link: https://www.youtube.com/watch?v=UDV161pAcUU

HTML CODE:

<div class="col-12">
   <div class="left col-6">
       <iframe class="left youtube" src="https://www.youtube.com/embed/UDV161pAcUU" frameborder="0"
           allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
       </iframe>
   </div>

   <div class="left col-6">
       <div class="p1">
           This Tropical Water Lily Preview Video shows Tricker's and the wonderful world of Tropical Water
           Lilies. Some scenes are from our DVD Introduction to Water Gardening. Purchase entire DVD.
       </div>
       <div class="clearfix"></div>

       <div class="col-12 p0">
           <img src="https://www.tricker.com/media/ecom/description/redtropicalheading1.jpg" class="img-100-auto" />
       </div>
   </div>
</div>

CSS

.youtube{
  width: 560px;
  height: 315px;
  max-width: 100%;
  height: 56.25%;
}
.img-100-auto{width:100%;height:auto}
.clearfix:after, .clearfix:before{content:" ";display:table}
.clearfix:after{clear:both}
.col-6{width:50%}
.col-12{width:100}
.left{float:left}
.p1{padding:rem}
.center{text-align:center}

We appreciate any suggestions or solutions to this issue. Thank you in advance!

htmlcssyoutube

Answer №1

After carefully examining the css code, I noticed a minor mistake in the .youtube class.

Surprisingly, there were two conflicting height values.

Removing one of these values would result in an overly tall element.

Even after attempting to fix it using the given solution:

.youtube{width: 1120px;height:56.25%;max-width:100%;}

Eureka! I finally found the solution. Your assistance was invaluable, and after spending the entire day on this issue, your suggestion made all the difference.

Answer №2

Have you considered using viewport widths (vw) instead of percentages for sizing elements? By calculating the height based on the width divided by the aspect ratio, you can achieve a more responsive design. Adjusting the width may be necessary to account for padding within each div.

For example:

.video-container{
  width: 60vw;
  height: calc(60vw/1.77);
}

Answer №3

My attempt to resize a video in an iframe using a tutorial I found on a website didn't quite work for me as I needed the video to be smaller on desktop view. Here's what I did to adjust the video size to meet my specific needs. If this solution can benefit someone else, that would be fantastic.

Here are the changes I made to resize the video within the iframe:

<div class="flex-video">
<iframe class="video" width="640" height="360" src="AddYourSource" title="Add Your Title" frameborder="0" allowfullscreen></iframe>
</div>

/*VIDEO*/
.flex-video{
width:100%;
position: relative;
margin:0 auto 20px auto;
text-align:center}

/*VIDEO MOBILE*/@media(max-width:768px){
.flex-video{
height: 0;
padding-bottom: 56.25%}
.flex-video iframe{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%}}

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

Creating an email-friendly button in Outlook without using images by styling a hyperlink with padding

Presenting a basic HTML code snippet - https://jsfiddle.net/mark69_fnd/6g0L0jwc/ <body style="background-color: white; font: normal 14px Verdana"> Hello <p></p> <a style=" font: bold 11px; text-decoration: none; background-color ...

htmlemailoutlook

Unable to drag and drop onto every part of a div element that has undergone a CSS transformation

Having trouble implementing a Drag & Drop feature. The droppable div is styled with CSS transformations, but the draggable div doesn't drop correctly on the right part of the box. If you'd like to take a look at the code and try it out yourself, ...

jqueryhtmlcssdrag-and-droptransform

The loading of the Bootstrap tagsinput has encountered an error

I am facing an issue with my Django application where tags are not loading properly in an input field using jquery. It seems like the application is unable to locate the bootstrap-tagsinput.css and bootstrap-tagsinput.js files. Can anyone provide guidance ...

javascriptjquerycssdjangotwitter-bootstrap

ReactJs CSS - This file type requires a specific loader for processing. There are currently no loaders configured to handle this file

I've noticed that this issue has been raised multiple times before. Despite going through all the questions, I still can't seem to resolve it. The transition from Typescript to Javascript went smoothly until I reached the implementation of CSS. U ...

javascriptcssreactjswebpack

Delete the value from the array and refresh the HTML with the updated total amount, or display '$' if there is no total amount

Currently, I have two inputs: debit and credit. On button click events, they update an array called 'debits'. Debit adds positive values while credit adds negative values. The next step is to sum the values in the array and assign it to a variab ...

javascriptjqueryhtmlarrays

Display and conceal information upon tweeting

Can anyone help me troubleshoot an issue with hiding the Twitter button after displaying new content? I tried adding a script to make it work, but it's still not functioning properly. Any insights on what I might be doing wrong would be greatly apprec ...

javascriptjqueryhtmlcsstwitter

Styling the body element in Material UI: A guide to customizing the

I'm having trouble figuring out how to target the root elements using the ThemeProvider in Material UI. const theme = createMuiTheme({ palette: { background: { default: "#00000", backgroundColor : 'black', b ...

cssreactjsmaterial-uithemes

Issue with the first-child selector

Is this supposed to work or am I losing my mind? .project.work:first-child:before { content: 'Projects'; } .project.research:first-child:before { content: 'Research'; } <div class="project work"> <p>abcdef</p> ...

csscss-selectors

Elegant bespoke input box

I am looking to create a customized input text feature similar to StackOverflow's tag editor, but with some minor differences. The goal is for the input field to function like a regular text input until a word is enclosed in curly brackets. Once enclo ...

javascripthtmlcss

What is the best way to ensure both landscape and portrait images are completely responsive and equal in height within a carousel?

I am currently working with a bootstrap carousel that contains both portrait and landscape images. On wide screens, the carousel height is automatically set to match the tallest image's height. However, this behavior results in white spaces on the top ...

htmlcsstwitter-bootstrapbootstrap-4bootstrap-carousel

Transforming dynamic class based on state value from React to TypeScript

I'm trying to implement this React function in TypeScript, but I'm encountering errors. const ListItem = ({ text }) => { let [showMore, setShowMore] = useState(false); return ( <div className="item"> ...

javascripthtmlreactjstypescript

What is the best way to make an element disappear 5 seconds after the mouse has stopped hovering

#section1 { display: block; } #section2 { display: none; } #container:hover > #section2 { display: block; } <div id="container"> <div id="section1">Section1</div> <div id="section2">Section2</div> </div> ...

javascriptjqueryhtmlcssmousehover

Efficiently styling table Spans with styled components in React

Can anyone help me with a frustrating CSS problem I'm facing? I am trying to render these tags as spans, but they are not separating properly as shown in the image below. They appear stuck together and I can't figure out why. I am using styled co ...

javascriptcssreactjsmaterial-ui

Troubleshooting problem with displaying circular tag image below an image using Jquery

I'm looking to enhance my HTML DOM by adding circular tag images with dimensions of 25x25 pixels to all image tags. While my current method is functional, I've noticed that the position sometimes shifts and the tag often ends up displayed below t ...

javascriptjqueryhtml

jQuery event triggers upon completion of execution

A custom code has been integrated into my project using jQuery. Check out the code snippet below: <script> $("#startProgressTimer").click(function() { $("#progressTimer").progressTimer({ timeLimit: $("#restTime").val(), onFinish ...

javascriptphpjqueryhtmlcss

Enhancing the Search Form Minimum Width in Bootstrap 4 Navbar

Looking for a way to create a search form with a width of 100% and a minimum width within a Bootstrap 4 navbar? Check out my code snippet here. <nav class="navbar navbar-expand-md navbar-light bg-faded"> <a href="/" class="navbar-brand">Brand& ...

csstwitter-bootstrapbootstrap-4navbar

Show and hide the div by clicking a button

Looking at the image below, my goal is to display the div under the reply button. (The div consists of a text box and send button) https://i.stack.imgur.com/jnaV4.png The code I have currently functions correctly. However, when clicking any reply button ...

phphtmlapibootstrap-4

The combination of Javascript and CSS allows for interactive and visually

I'm currently working on a project where I had to create a simulated weather page using only Javascript. However, I am struggling with the overall layout and have a few questions that I hope someone can help me with: Despite trying various methods ...

javascriptcss

Elevate the placeholder in Angular Material 2 to enhance its height

I want to make material 2 input control larger by adjusting the height property of the input using CSS <input mdInput placeholder="Favorite food" class="search-grid-input"> .search-grid-input { height:30px!important; } As a result, the image o ...

cssangularangular-material2

Creating beautiful prints with images

I have been tasked with developing an MVC C# application where the contents of a div are dynamically created using an AJAX call to fetch data from a database. Upon successful retrieval, the content is then displayed as a success message in JavaScript. Here ...

javascripthtmlcssajax