What method can be used to dynamically resize two side-by-side iframes in proportion to a specific ratio?

Hey, I've got this code snippet: So there are two iframes positioned side by side with a specific ratio as indicated in the link provided. My aim is to maintain that ratio regardless of the screen size where it's viewed. The first iframe is named iframe2 and the other one is named iframe1.

<div class="box">
<iframe allow="camera; microphone; fullscreen; display-capture; autoplay" src="source 1" 
style="border:0px #ffffff none;" name="myiFrame" scrolling="no" frameborder="1" 
marginheight="0px" marginwidth="0px" height="600px" width="300px" align="right" 
allowfullscreen> </iframe>
</div>

<div class="box">
<iframe src="source 2" style="border:0px #ffffff none;" name="myiFrame" scrolling="no" 
frameborder="1" marginheight="0px" marginwidth="350px" height="600px" width="1033px" 
allowfullscreen></iframe>
</div>


[Here's how the desired ratio looks like, irrespective of screen size][1]
[1]: https://i.stack.imgur.com/H7D81.png

I'm figuring out how to automatically resize both iframes while maintaining this specific ratio. I dabbled a bit with CSS but couldn't get the resizing right—it kept turning into a small square whenever I applied methods suggested in other queries. Would appreciate any help or insights on how to tackle this challenge!

htmlcssiframe

Answer №1

Give This a Shot

.container {
    position: relative;
    float: left;
    padding-bottom: 38%;
    border: 5px solid #fff;
    box-sizing: border-box;
    width: 70%;
}
.container.video2 {
    width: 30%;
}
.container iframe {
    position: absolute;
    width: 100%;
    top: 0;
    left: 0;
    height: 100%;
}
<div class="container">
  <iframe width="1280" height="720" src="https://www.youtube.com/embed/9xwazD5SyVg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<div class="container video2">
  <iframe width="1280" height="720" src="https://www.youtube.com/embed/9xwazD5SyVg" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

Answer №2

Have you considered utilizing the aspect-ratio property in CSS? Here's an example:

   iframe {aspect-ratio: 1/1;}

Additionally, I recommend organizing your styling in a separate CSS file instead of using inline styles.

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

Utilizing the <style scoped> feature within my Angular template

When adding CSS styles in the specified htm file's templateUrl while loading a directive, I wonder if this is a bad idea. Will it be repeated every time the template is instantiated on the rendered page, or does Angular handle this differently? By usi ...

javascriptcssangularjs

The image fails to display when using THREE.js and Panolens.js

Trying to create a 360-degree environment with informational buttons using THREE.js and Panolens.JS However, I'm unable to resolve why the image is not appearing. Continuously encountering the error: Uncaught ReferenceError: process is not defined. ...

javascripthtmlcssthree.js

Transmit HTML message using the "textarea" tag through email

Whenever I try to send the content of my "textarea" via email, it always ends up being sent as a blank message. How can I fix this issue? Below is my PHP code: <?php $input = json_decode(file_get_contents("php://input"), true); $ToEmail = "<a href ...

javascriptphphtmljson

The Angular Material date picker unpredictably updates when a date is manually changed and the tab key is pressed

My component involves the use of the Angular material date picker. However, I have encountered a strange issue with it. When I select a date using the calendar control, everything works fine. But if I manually change the date and then press the tab button, ...

javascripthtmlangulartypescriptangular-material

Is it possible to operate a mobile site automatically alongside a desktop site?

I'm currently working on a website that looks fantastic on desktop, but doesn't quite function properly when viewed on mobile devices. I'm curious if there is a method or system I could implement to automatically load the mobile version of t ...

htmlcssresponsive-design

Turn off webpage caching in HTML5

I am looking for a way to disable the browser cache using HTML5. While I came across this helpful post (How to control web page caching, across all browsers?), it only provides information for HTML4 or other languages. In my web application, I utilize Ja ...

htmlcachingcache-controlhttp-cachingno-cache

The Bootstrap 3.3 Carousel is stationary and does not rotate

I am facing a challenge with implementing a Carousel using Bootstrap version 3.3.7 on my website. The code snippet is as follows: <!-- Carousel ================================================== --> <div class="row dark-start d-none d-lg-block"&g ...

javascripthtmltwitter-bootstrap-3carouselbootstrap-carousel

Creating two columns with separate scrollbars in Responsive Bootstrap is a useful feature for organizing content in a visually

Is there a way to create 2 columns with scrollbars using Bootstrap when a button is clicked? Here's what I'm trying to achieve: My webpage consists of a row-fluid div that contains the main-column div with main-content and extra-content. There&a ...

jquerycsstwitter-bootstrapresponsive-designsass

Tips on how to align several divs within another div

I've been attempting to center multiple div blocks within another div or HTML document, but I haven't had any success with the methods I've found on StOv. Here's an image of what I'm aiming for: https://i.stack.imgur.com/DB7uQ.jp ...

jqueryhtmlcss

Delivering a Captivating JavaScript Pop-Up upon Page Loading

I have a simple pop up window (with no content) that triggers with the 'onclick' event. How can I modify the code below to make the popup appear automatically when the page loads? <head> <title>Popup Display</title> < ...

javascriptjqueryhtmlpopuppopupwindow

Tips for improving the speed of loading infinite scroll pages

I am currently working on scraping over 100k rows from the provided URL. The data goes back approximately a month, loading in batches of 7-8 rows at a time. My current approach involves using a macro to scroll down the page slowly, which is effective but ...

javascripthtmlseleniumweb-scrapingautomation

Code - Capture user's input

I have multiple input fields in my HTML document and I want to retrieve the text entered into one of them. Here's an example of one such input field: <TH> <FORM> <input name="designation" type="text" size="12" /> < ...

javascriptjqueryhtmlinput

CSS overflow property does not take effect when set to hidden

I'm having trouble understanding why the overflow: hidden property is being overridden by a descendant element. Take a look at this example I've put together http://jsfiddle.net/2fRxc/. HTML <div class="relative"> <div class="overf ...

htmlcss

Adjust the alignment and floating of text within an iframe on the same domain

Is it possible to align text on the right side of an iframe that contains a width and text inside? The iframe's src is from the same domain. If so, how can this be achieved through JavaScript? ...

javascripthtml

Basic color scheme

I'm attempting to change the background color behind a partially transparent .png div. The CSS class that modifies the div is ".alert". Manually editing the .alert class background color works perfectly, and now I want to automate this on a 1-second c ...

javascriptjqueryhtmlcssloops

List of ordered rows within a table

I am looking to incorporate a question form into a Markdown/HTML page where each question is labeled with a number. QUESTIONS | ANSWERS | -------------------|-------------------| 1. First Question | | ----------------- ...

htmlmarkdown

Having trouble getting the overflow scrollbar to work properly?

I recently created a Whiteboard using Vue. The Whiteboard consists of an SVG element where I can add other SVG elements like paths to it. In order to enable scrolling within the SVG, I came across this example which seemed quite helpful. Check out the exa ...

htmlcssvue.jssvg

Responsive CSS - reordering div elements

#div1 { position: relative; max-width: 100%; height: 100px; background-color: green; color: white; } #div2 { position: relative; max-width: 100%; height: 100px; background- ...

htmlcssresponsive-design

disable full page scrolling on iOS devices

Can you achieve elastic scrolling for a single absolutely positioned div in Mobile Safari without causing the entire page to move up and down? Check out this basic example that illustrates the problem: <!doctype html> <html> <head> ...

javascripthtmlioscssmobile-safari

Why am I unable to choose an element by its Id?

My goal is to pass an ID as an argument to a function in the following manner: HTML <button type="button" class="like btn" onclick="like('<%=postid%>')"> <svg id ='<%=likei ...

javascripthtmlexpressdomejs