Strange height problem detected in embedded YouTube video

Currently, I have a page with an embedded YouTube video that is intended to be placed in a container with a variable width. When the video is outside of the container, the aspect ratio appears normal. However, once it is placed inside the container, the height of the video stretches beyond what would typically be considered a standard aspect ratio (Refer to the screenshot).

Below is the relevant code snippet:

.video-container {
    display: block;
    float: left;
    width: 74.05rem;
    margin-left: 1.1rem;
    margin-right: 1.1rem;
    margin-right: 0;
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0; }

.video-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; }

I consulted this article for guidance, so if there is a more effective approach, please feel free to share! http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

If you'd like to see this in action, visit

htmlcssvideoyoutube

Answer №1

The method described in the referenced article utilizes jQuery to achieve the desired effect. Below is the script provided for iframes:

// Locating all YouTube videos
var $allVideos = $("iframe[src^='http://www.youtube.com']"),
  
    // The flexible width element 
    $fluidEl = $("body");

// Calculating and storing aspect ratio for each video
$allVideos.each(function() {

  $(this)
    .data('aspectRatio', this.height / this.width)
    
    // Removing fixed width/height specifications
    .removeAttr('height')
    .removeAttr('width');

});

// Upon window resize
$(window).resize(function() {
  
  var newWidth = $fluidEl.width();

  // Adjusting size of all videos based on their aspect ratio
  $allVideos.each(function() {

    var $el = $(this);
    $el
      .width(newWidth)
      .height(newWidth * $el.data('aspectRatio'));

  });

// Triggering a resize event to adjust all videos upon page load
}).resize();

http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

Answer №2

After some investigation and experimentation, I've concluded that the issue is actually caused by the padding hack. Now, I'm on a quest to find an alternative solution.

Appreciate you taking the time to look into this matter nonetheless.

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

Firefoxy can't seem to get through the navigation keys within an element that has a hidden

Check out this fiddle I created: http://jsfiddle.net/c11khcak/13/. My goal is to hide the scrollbar of an element while still allowing it to be scrollable using the mouse wheel and up/down navigation keys. I've been able to achieve this using some bas ...

htmlcssfirefoxscroll

Is there a way to automatically scroll to the bottom of a div when it first

Looking to enhance my application with a chat feature that automatically scrolls to the bottom of the chat page to display the latest messages. Utilizing VueJs: <template> <div id="app"> <div class="comments" ...

csstypescriptvue.jsscroll

Unable to see Bootstrap 5.2 Modals in action with documentation demo

Here is an example that I copied and pasted from the documentation on https://getbootstrap.com/docs/5.2/components/modal/: <!-- Button trigger modal --> <button type="button" class="btn btn-primary" data-bs-toggle="modal&q ...

javascripthtmldjangobootstrap-5bootstrap5-modal

Expanding Gridview Width within a Container in ASP.Net: A Step-by-Step Guide

https://i.stack.imgur.com/ZaJE7.jpg After viewing the image above, I am facing a challenge with stretching and fixing a gridview to contain the entire div where it is placed. The issue arises when the gridview adjusts automatically based on the content&ap ...

javascriptc#jquerycssasp.net

Dynamic React animation with sliding elements

When jumping between the second and third "page" of content, I am unable to determine the reason why it is happening. The content is displayed as an absolute position. Check out the sandbox here: https://codesandbox.io/s/nostalgic-bhabha-d1dloy?file=/src ...

cssreactjscss-animationsreact-transition-group

Is it secure to use a unique, static HTML/CSS website?

As a web developer, I am currently working on hosting a Wordpress-website for a client. However, my frontend development skills have improved significantly and now I feel inspired to create a simpler and more customizable version on my own. This website i ...

jqueryhtmlcsssecurityweb

What steps can I take to ensure my header appears perfectly aligned? (HTML/CSS)

My header on my website is all messed up with the links appearing incorrectly. I suspect it's an issue with style.css, so I attempted to modify the style.css file but had no luck. I have very limited experience with .css and cannot seem to figure out ...

htmlcss

Why does getElementById work when getElementsByClassName doesn't?

I created a script with the purpose of hiding images one and two, while keeping image 3 visible and moving it into their place. The script functions correctly when using div Id's instead of div Classes. However, I prefer to use div classes for groupin ...

javascripthtmlcssfunctiongetelementsbyclassname

Incorporate a pseudo class to a unique custom template or directive within an Angular project

I have been developing a custom dropdown menu directive in AngularJS. The issue I'm facing is that the buttons in my template become inactive when interacting with the dropdown menu, unlike a regular HTML select which remains active while the dropdown ...

javascriptjqueryhtmlcssangularjs

Element is not perfectly aligned with the bottom; Slightly below the bottom edge

Why does an element positioned absolutely within a div that has relative positioning end up slightly lower than the bottom of the parent div? What can be done to fix this issue without just adjusting the bottom value on .hoverAction? function showFileUp ...

htmlcssposition

Struggling to modify the page width using CSS and HTML on Wordpress, facing unexpected limitations

I've exhausted all my options. I've attempted to add a certain % page width globally using CSS in the editor, page template, and customizer but it's just not working. It's frustrating because I'm using the Twenty Twenty Two theme, ...

csswordpress

Issue with submitting form using Jquery on select action

There seems to be an issue with this jquery code that is supposed to trigger a form submit when a drop down select is changed. It works fine on our test site, but once we move it to the live website, it breaks. Can someone help us troubleshoot and identify ...

jqueryhtmlasp-classic

The Label in Material UI TextField is appearing on top of the border,

Incorporating Material UI TextField and Material UI Tab, I have encountered an issue. There are two tabs, each containing a text field. Upon clicking on the TextField, the label's border is supposed to open, but this behavior only occurs if the curren ...

cssreactjsmaterial-ui

Leverage the selected values to dynamically generate a table using jQuery

Can someone help me figure out how to store multiple values from a selection and then create an array using jQuery? Here's the scenario: In my multiple selection, I have 5 values: <select name="animal" id="animal" multiple="multiple">    ...

javascriptjqueryhtmlselect

Is it possible to show one element while hiding others upon clicking using JavaScript?

Concept My idea is to create a website with a navigation menu where only one section is visible at a time. Each section would become visible upon clicking a specific button in the navigation bar. Challenge I attempted to achieve this using the following ...

javascripthtmlcssweb-frontend

How come I can click on both radio buttons simultaneously?

How come I can select both radio buttons simultaneously? <form #form="ngForm"> {{ poll.counter1 }} votes <input type="radio" id="{{ poll.choice1 }}" value="{{ poll.choice1 }}" (click)="onChoice1(form)">{{ poll.choice1 }} <br> ...

htmlangular

Send an array of data from the view to the Controller in CodeIgniter

I have been searching for a solution to this question. However, for some reason, my code is not functioning properly. Here is what I want to achieve: Data Array -> ajax post -> codeigniter controller(save data in DB and redirect to another page) ...

javascriptphphtmlajaxcodeigniter

Is it possible to apply a specific CSS color to a row in Angular 9 mat-tables without having to individually set it in multiple locations?

I am working on a mat-table in Angular 9 where I need to implement a function that determines the CSS class for each row... getRowClass(item: Item): string { let class_ = ""; if (...condition1...) { ... } else { class_ ...

cssangularangular9mat-table

Encountering a problem when attempting to send an HTML email through PHP

Trying to use PHP to send email within an HTML code snippet. Here's the code I've written: <?php if($_SERVER['REQUEST_METHOD'] == 'POST') { if ( mail ('<a href="/cdn-cgi/l/email-protection" class="_ ...

phphtmlemail

Switch from monochrome to color when hovering inside a clipping mask

I have successfully mastered the technique of changing an image from grey to color on hover using CSS and JavaScript. However, I am curious about whether it is possible to achieve the same effect using a clipping mask. Attached is an image that illustrate ...

csshovermaskclipping