Guide to optimizing the display of a responsive iframe across various devices such as mobile and desktop

I have implemented the following CSS in an iframe to make it responsive. It works well on desktop browsers, but on mobile browsers, the iframe only displays half of the screen. Can you please review the code below and provide guidance on how to fix this issue?

CSS :-

.iframe-container {
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}

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

/* 4x3 Aspect Ratio */
.iframe-container-4x3 {
  padding-top: 75%;
}

HTML:-

<div class="iframe-container">
  <iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>
htmlcss

Answer №1

If you're discussing something similar to the image shown below on mobile devices, it's completely normal behavior as the image or video will adjust itself to preserve its aspect ratio.

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

However, if you desire a full-height video, you can refer to the code snippet provided below:

<div>
<iframe src="//www.youtube.com/embed/KMYrIi_Mt8A" allowfullscreen></iframe>
</div>

<br>
<br>
<br>
fdfd 

div {
    position: relative;
    height: 100vh;
}

iframe {
    width: 100%;
    height: 100%;
    border: none;
    margin: 0;
    padding: 0;
}

https://jsfiddle.net/ytvmLu3w/

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

The moving div suddenly halts before continuing its journey

Two overlapping divs create an interesting sliding effect. A gray div slides in from the top over a black div. Hovering your mouse over the black div causes the gray one to slide out of view. If you hover over the gray div, it also slides out but pauses ...

jqueryhtmlcss

Generating an app without using the Jade template engine with Express

Interested in creating an express skeleton using the express generator method. Here are the steps: $ npm install express-generator -g But it tends to add a lot of automatic jade files, which can be overwhelming. Is there a way to eliminate those jade fi ...

htmlnode.jsexpresspug

Arrange two internal divs on top of one another with the option to maintain the float

While searching for a solution to my issue, I noticed that most responses involved removing the float property. However, since I am new to CSS, I would like to explore using float and see if it's the best approach. Here is the fiddle I've been w ...

htmlcss

Expanding the size of a div using the Bootstrap grid system

I need to customize the width of the date column on my inbox page so that it displays inline without breaking the word. Even when I use white-space: nowrap, the overflow hides it due to the fixed width. I want the name and date classes to be displayed in ...

javascripthtmlcssbootstrap-5

Increased spacing HTML

Trying to create a footer in HTML, but each time I attempt it ends up with an extra margin on the left side. Here is my current footer code: <div id="footer"> Tester </div> #footer { background-image: url(images/backgroundrpatternf ...

htmlcssmargin

Exploring issues with jQuery

I'm encountering an issue with my code. I have multiple divs with the same classes, and when I click on (toggle#1) with the .comments-toggle class, all divs below toggle-container expand. What I actually want is for only the div directly below .commen ...

javascriptjqueryhtmlcss

Unable to select image inside linked container

I'm attempting to display a dropdown menu when the user clicks on the gear-img div using jQuery. However, because it's wrapped inside an a tag, clicking redirects me to a URL. I also want the entire div to be clickable. Any suggestions for a solu ...

javascriptjqueryhtmlcss

Is there a way to modify the way a screen-reading tool pronounces a specific word in a sentence without causing interruptions in the middle of the sentence?

Imagine I have the following sentence written in HTML: <p>Please input your licence number</p> An issue arises when a screen-reader pronounces the word 'licence' as "liss-ens" instead of "lice-ens." To resolve this, I aim to provide ...

htmlcssaccessibilityvoiceoverscreen-readers

Managing excess space in a flexbox: Tips for handling events

Is there a way to manage events triggered by clicking on the violet-colored space around elements? I tried adding a general onclick event to the container, but it seems to be interfering with the individual item behaviors that already have their own intern ...

htmlcssreactjsflexboxmaterial-ui

Transforming the appearance of the menu element in Vue using transitions

In my Vue app, I have this SCSS code that I'm using to create a smooth transition effect from the left for a menu when the isVisible property is set to true. However, I am encountering an issue where the transition defined does not apply and the menu ...

javascripthtmlcssvue.js

Is there a way to replicate the Vista Command Link in HTML?

This particular dialog mimics the design of a Windows Vista Command Link: View image here: http://i.msdn.microsoft.com/Aa511455.commandlinks01(en-us,MSDN.10).png I'm curious if anyone has created HTML code that replicates the appearance and function ...

htmlwindows-vista

What is the contrast between specifying a MIME type and omitting it?

If I were to write a stylesheet in an HTML document, it's worth noting that since the introduction of HTML5, the type attribute is no longer necessary as text/css has become the default and only possible value: <style type='text/css'> ...

htmlcssmime-typesmedia-type

Ensuring a form is required using ng-validate

A sample form structure is shown below: <div class="row" id="yesAuth"> <div class="col-md-6" ng-class="{ 'has-error': invalid.basicAuthForBackendUsername, 'has-success': valid.basicAuthForBackendUsername}"> < ...

javascriptjqueryhtmlangularjs

Setting session expiration for an HTML page in MVC with JavaScript - A step-by-step guide

I'm working on a HTML page within an MVC framework that includes a button click function. I'm trying to figure out how to redirect the user to the login page if the page remains idle for 30 minutes. I've attempted using the code snippet belo ...

javascripthtmlasp.net-mvc

Add the directive prior to rendering the HTML

I attempted to comprehend the problem below: My html string is rendered using ng-bind-html I successfully replaced a specific placeholder in the html string with a directive (or multiple). For example, I changed [placeholder]test[/placeholder] to <my- ...

htmlangularjsangularjs-directive

opinions on a product in angular from a user's perspective

user schema: var UserSchema = new Schema({ review_likes : [{type:String}], review_dislikes : [{type:String}] }); review schema: var ReviewSchema = new Schema({ productID:{type: String, required: true}, numoflikes:{type:Number, re ...

htmlangularjsnode.jsmean

Is there a way to transform an HTMLCollection into an array without depleting it of its elements?

I've been attempting to transform a collection of 4 divs in HTML into an array, but all my efforts seem to lead to the array becoming void. <div class="container"> <div class="shape" id="one"></div> <div class="sh ...

javascripthtmlarraysdom

What's the best way to preserve the aspect ratio of my background image while utilizing background-size: cover;?

I have a background image that I'm working with. Is there a way to preserve the aspect ratio of the image even when using background-size: cover;? Currently, the image fits perfectly on the screen but appears slightly distorted. I've experimented ...

htmlcssdebugging

How can one address the issue of undefined data within table cells?

I have encountered an issue while reading and displaying an XML file on a webpage using a JavaScript script. The problem arises when the page loads, and the information inside the cells of the table shows as "UNDEFINED". The intended display should include ...

javascripthtmlxmlhtml-tableundefined

The presentation of the Google graph with dynamically changing data appears to be displaying inaccurately

I am looking to incorporate a graph displaying sales and purchase data on my webpage. Users should be able to select from categories like Purchase, Sales, or Production. I have separate tables for Purchase (AccPurchase) and Sales (AccSales), with productio ...

javascriptphphtmlcssgoogle-visualization