Ensuring uniform height for video embeds and images within a single row

I have two divs with a 50% width each. One contains a simple image and the other includes a YouTube video embed.

My goal is to ensure that both elements (image and video) have the same height, while maintaining responsiveness.

I attempted to use the css from for the video embed, but I am struggling to make it work correctly.

Here is what I aim to achieve:

https://i.sstatic.net/upKoJ.png

This is my jsfiddle:

<div class="content">
<div class="left">
    <img src="http://placehold.it/756x560/2cb7c0/ffffff">
  </div>
  <div class="right">
    <div class='embed-container'><iframe src='https://www.youtube.com/embed/C7dPqrmDWxs' frameborder='0' allowfullscreen></iframe></div>
  </div>
</div>

https://jsfiddle.net/ujddekdf/

cssyoutubeyoutube-apiheightresponsive-images

Answer №1

Resizing a youtube video can be tricky since the proportions are preset by the provider. A simple solution would be to resize your image to match the video's proportions, ensuring that it also looks good on responsive layouts:

<img src="http://placehold.it/756x424/2cb7c0/ffffff">

https://jsfiddle.net/abcsdfgh/3/

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

Problem with ngStyle: Error indicating that the expected '}' is missing

I encountered an error in the Chrome console when trying to interpret the code below: <div [ngStyle]="{'width': '100%'; 'height': '100%'; 'background-size': 'cover'; 'background-repeat&ap ...

javascripthtmlcssangulartypescript

"Customizing the color of the arrow in Bootstrap tooltips

Trying to customize tooltips in twitter-bootstrap, I set the template option of the tooltip with inline styles to achieve red tooltips instead of the default black color: $(document).ready(function(){ options = { container: 'body&ap ...

csstwitter-bootstrap

Tips on customizing the default dropdown icon in a select list

Does anyone know of a website or code snippet that offers source code for customizing select elements? I am looking to replace the default dropdown icon with an image. Any suggestions? Thank you! ...

javascripthtmlcss

The Proper Way to Include External CSS in a Next.js Page Without Triggering Any Warnings

I find myself in a scenario where I must dynamically inject CSS into a webpage. The content of this page is constantly changing, and I am provided with raw HTML and a link to a CSS file from a server that needs to be displayed on the page. My attempt to ...

javascriptcssreactjsnext.jsserver-side-rendering

The reverse animation for .is-exiting in Smoothstate.js is not triggering

I've been searching for a solution to my issue but haven't had any luck finding one that works for me. Currently, I am using smoothstate.js to trigger animations when the page loads and ideally reverse them when the page exits. However, while th ...

jquerycsssmoothstate.js

Positioning items in a CSS grid layout involves ensuring that item 1 remains at the bottom of its column, while item 2 is centered within its column

I am trying to create a grid layout using CSS grid: The main section should have two columns. The first column will contain an image that sticks to the bottom of the grid, while the second column will display a centered card. Below are my HTML/CSS codes: ...

htmlcssflexboxcss-gridpositioning

How can I adjust the padding and width attributes of the mat-menu in Angular 5

Today, I am struggling with a piece of code. Whenever I click on the Details button, it is supposed to open a mat-menu. However, for some reason, I cannot seem to adjust the padding or width of the menu: <div id="box-upload" [hidden]="hiddenBoxUpload" ...

htmlcssangulartypescriptangular-material

Adding pictures to the background image

I am encountering an issue with the code on my Wordpress website Here is a snippet of HTML: <div class="test"> <?php if(has_category( 'update' ) || has_category( 'uncategorized' )) { ?> <img alt="icn" src="& ...

phpjqueryhtmlcsswordpress

Activate the display of a subcategory when the class is modified

For the past couple of days, I've been grappling with this issue. Despite my best efforts, being new to javascript may be hindering my progress. My goal is to create a Side Navigation that highlights the current section you are on. Fortunately, I stu ...

javascriptjqueryhtmlcss

Setting the height to 100% will not maintain the aspect ratio of the image

Having trouble with Blogger once again as I try to style the homepage. I am aiming to feature snippets and titles in tiles with a fixed height of 200px but a dynamic width for responsive design. My goal is to display the first image and a "read more" butt ...

jqueryhtmlcssimageblogger

Despite being correctly linked in EJS and without any errors, the CSS is still not loading

Hey there, I'm facing an issue with linking a CSS file to an EJS file. I believe that I am connecting them correctly: <head> <title>Acres & Karats Calculator</title> <base href="/"> <link type="text/css" href="css/Acres ...

cssnode.jsexpressejs

Make individual term span the entire width of 100%

Is it feasible to expand a single word like "News" to occupy 100% width of the div element? My goal is to automatically adjust letter spacing and justify individual words. Currently, I have a menu with items such as: Home About News Etc It would be idea ...

htmlcss

Inquiring about browserify or webpack on a website using node - a few queries to consider

Seeking assistance with a website project I am currently working on. The project consists of 7 HTML documents, 3 stylesheets, 8 JavaScript files (including jQuery.min.js and some additional jQuery plugins), and various images. I am looking to bundle and mi ...

javascripthtmlcssnode.jsweb

Are Your Padding Styles Missing?

I've noticed that the text under the photos on this page in the main section (a.event) is not displaying the 5px padding top and bottom. Any suggestions for fixing this? Thank you! =) a.event { width:315px; height:auto; border:0; padding: 5px 0; } ...

csswordpresspadding

What is the best way to align an image with the position of a div?

Looking for assistance on positioning an image to a div's position after it has been cloned. $(".raindrop1").clone().removeClass("raindrop1").appendTo("body"); $("img").css({"left": "div".x, "top": "div".y}); .shape{ border-radius: 50px; width: 10p ...

javascriptjqueryhtmlcss

The CSS theme toggler for Bootstrap

I am currently working on integrating a style switcher following the instructions provided at . However, when I add a title="" attribute to the CSS link, the CSS file fails to load on the page and the styles revert back to default Bootstrap. I have added ...

javascriptcsstwitter-bootstrap

What is the best way to ensure that the question text will wrap onto a new line if it becomes too lengthy

I am currently working on developing ASP.NET MVC applications. However, I am facing a design issue with the HTML, CSS, and Bootstrap elements on one of my pages. The problem arises when Question 8 exceeds the border and does not wrap to a new line as inte ...

htmlcssasp.net-mvcbootstrap-4html-helper

Tips for adding a personalized close button to a Bootstrap modal

I need help with a Bootstrap modal in my project that has a close button positioned at the top right corner. I've used CSS to position the button, but it's not staying in one place consistently despite applying absolute positioning. I've tri ...

javascripthtmljquerycssbootstrap-5

two adjacent DIV elements with matching heights

Currently, I am in the process of developing an internal web page with a wrapper DIV structure based on recommendations from an online tutorial. Within this wrapper, there are different sections including a header, mainnav, content, sidenav, and footer. Th ...

htmlcss

What are some tips for getting media queries to function properly?

I need help with my homepage banner image as I am trying to make it responsive by adding media queries. The goal is for the image to adapt to 3 different sizes based on the screen being used, but currently only the medium-sized version appears. Could someo ...

css