The videos in my iframe function perfectly on desktop screens, but they do not adjust size properly for mobile devices. What steps can I take to resolve

I've encountered an issue with embedding a YouTube video on my website. Everything works fine on desktop, but when viewed on mobile devices, the iframe does not resize properly despite using media queries. How can I ensure that the iframe adjusts correctly to different screen sizes?

This is what my code currently looks like:

<div class="container-fluid text-justify bg-2" id = "video-container">
  <h2 class = "text-center">Sample Text</h2>
  <p>Some more sample text <br>
  Another line of Sample text </p>

  <div id = "video">
    <iframe  width="560" height="315" src="https://www.youtube.com/embed/sIP4Gymk1nE" frameborder="0" allowfullscreen></iframe> 
    <iframe width="560" height="315" src="https://www.youtube.com/embed/U4TUt2ukzyE" frameborder="0" allowfullscreen></iframe>
    <iframe width="560" height="315" src="https://www.youtube.com/embed/XS4S2O8UXqE" frameborder="0" allowfullscreen></iframe>

 </div>
</div>

Additionally, here's the CSS I'm using:

#video iframe{padding: 15px;}
@media all and (max-width: 768px){

 #video-container > #video > iframe{
    padding: 15px;
    width:100%;
    height:100%;

}}

When viewed on a mobile device, the video overflows outside the div. Here's a screenshot for reference: https://i.sstatic.net/zA9XJ.png

Any suggestions on how to fix this issue would be greatly appreciated. Thank you!

htmlcsstwitter-bootstrapiframeyoutube

Answer №1

Give this a shot:

HTML

 <div class="container-fluid text-justify bg-2" id = "video-container">
    <h2 class = "text-center">Example Text</h2>
    <p>Some more example text <br>
        Another line of example text </p>

    <div class="video">
        <iframe src="https://www.youtube.com/embed/sIP4Gymk1nE" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class = "video">
        <iframe src="https://www.youtube.com/embed/U4TUt2ukzyE" frameborder="0" allowfullscreen></iframe>
    </div>
    <div class = "video">
        <iframe src="https://www.youtube.com/embed/XS4S2O8UXqE" frameborder="0" allowfullscreen></iframe>
    </div>
</div>

CSS

        #video-container {
            max-width: 560px;
        }
        .video {
            position:relative;
            padding-bottom:56.25%;
            padding-top:30px;
            height:0;
            overflow:hidden;
        }

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

This method worked for me, hopefully it does the trick for you too!

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

Tips for sorting only the primary categories and excluding the subcategories in the Search & Filter plugin

I am using a Search & Filter plugin for WordPress that includes a Filter feature. do_shortcode( '[searchandfilter submit_label="Filter" types="checkbox" taxonomies="category"]' ); My issue is that when using the filter, it displays all categori ...

phphtmlwordpress

AngularJS Easy Gallery

I created a basic gallery, but the code I used is not very efficient. I want to make it more universal and tried using loops in my code, but I couldn't figure it out. Can someone please help me? Here is the HTML: <ul class="catalog"> <l ...

javascripthtmlangularjsjqlite

Curved edges on pictures

http://jsfiddle.net/48Y37/ I'm trying to achieve rounded corners on both ends of the top of an image, but the image itself is covering them up. I've searched online and found suggestions like using overflow: hidden; or even resorting to JavaScri ...

htmlcss

Designing an opening interface for an HTML5 Canvas gaming experience?

It's common knowledge that the HTML5 Canvas element interfaces seamlessly with the incredibly efficient Javascript Engines found in Firefox, Safari and Chrome. Lately, I've been delving into game development using Javascript and the Canvas, and ...

javascriptjqueryhtmlcanvas

``KnockoutJS offers a variety of options for handling options, including optionsText

I am curious about the functionality of data-bind, options, optionsText, and optionsValue in this code snippet: <div class="header dropdown"> <select data-bind=" value: locale.selected_locale, options: [{ value: 'en-CA&ap ...

javascripthtmlknockout.jsdata-bindinginternationalization

Preserving the scroll position of "md-content" when navigating between various views using "ngView"

While using angularJs and implementing ngView, it's known that scroll position is maintained when navigating back and forth between different views. However, I've incorporated angular material directives like md-toolbar and md-content in my views ...

htmlangularjsangular-material

Click on a button to place the client's text into the HTML

My approach involves using php to set up a guest message board where users can leave messages without the need for a database. Instead, I simply use a text file to store and append new data. I'm exploring ways to allow users to easily add new content ...

javascriptphpjqueryhtmlajax

I'm seeking guidance on how to efficiently showcase MySQL data using PHP and HTML

After creating a script to test output from my database, I encountered an issue. While the PHP portion works perfectly, extracting the data into an HTML div tag does not. Any suggestions on how to fix this would be greatly appreciated. Thank you. //Establ ...

phphtml

I'm encountering an issue with VS Code where it is unable to identify ejs tags within my project

I'm running into an issue with Vs code where it's not recognizing ejs output tags when they're inside an html tag, like in the input tag below : <input type="checkbox" name="checkbox" value="<%=item._id%>" onChange="this.form. ...

javascripthtmlnode.jsexpressejs

Tips for verifying that one of the two input fields is filled in Bootstrap 5 validation

I have implemented Bootstrap validation for the other input fields in this form by using the 'required' attribute. However, for these two specific fields, if at least one is not empty, then the form should be submitted. <form class="needs ...

javascripthtmlvalidationbootstrap-5

Troubleshooting Problem with Bootstrap CSS Menu Box Format

I'm having trouble creating a simple menu for my Bootstrap site. What I want to achieve is something like this: https://i.sstatic.net/abZXC.png This is what I have accomplished so far: https://i.sstatic.net/JFVC2.png I've attempted to write th ...

javascriptjqueryhtmlcsstwitter-bootstrap

Tips on how to add a file input type:

When working with my HTML code, I encountered an issue. When I change the type attribute to "text", everything works fine. However, when I change it to "file", nothing happens when I click. <input type="file" name="pic[]" accept="image/*">a <inpu ...

jqueryhtml

Generate a Bootstrap dropdown button using JavaScript

Can you assist me in generating an HTML button using JavaScript with Bootstrap styling and customization? I have successfully created a Bootstrap button: <div class="dropdown"> <button class="btn btn-secondary dropdown-toggle" type="button" id ...

javascripthtmlbootstrap-4

What is the process for setting up automatic tooltip validation messages?

After creating a sample file for validation, everything seems to be working smoothly... However, I now have a specific requirement - I would like to make some modifications while validating. The error message should automatically display in a tooltip. Thi ...

javascriptjqueryhtmltwitter-bootstrapcss

Creating an HTML table dynamically through JavaScript within a script block

I am working on using a JavaScript API to send emails, with the ability to include HTML. I am trying to create a table inside the email body, but it doesn't seem to be displaying properly. Here is the code snippet I'm using: <script> $ ...

javascripthtml

What is causing my email form field to be excessively tall with centered text?

I have noticed that the layout of my form field seems to be different than expected. The webpage in question is located at Specifically, the email input field appears to be taller than usual and centered on the page. However, upon reviewing my code, I am ...

cssformsemailfield

Can you explain the purpose of the #shadow-root found within elements?

Today I witnessed something out of the ordinary. Take a look at the images attached to this post. Specifically, pay attention to the input[type="text"] labeled as "1" in the screen picture. The CSS styling for it appears as follows: tab ...

htmlgoogle-chromegoogle-chrome-devtools

Troubleshooting Failed Execution of ASP.net's (Document).ready() Function

I am working on an ASP.net MVC 4 web application using Visual Basic. In the _Layout.vbhtml shared view, I have a piece of javascript code at the bottom intended to hide a loading div and display the main content once everything has loaded. Here is a snipp ...

javascriptjqueryhtmlasp.net-mvcdocument-ready

Impact items without the need to individually assign a class to each item

Apologies if this question has already been answered elsewhere...I have been unable to find the solution, perhaps due to my lack of knowledge on how to phrase it. I am attempting to modify list items by setting a class for the ul, eliminating the need to ...

htmlcsshtml-lists

Exploring the validation of numbers solely in input using HTML

I attempted the following code: var nNoT; nNoT=Number(ObjVal("qTo")); alert(nNoT); if (nNoT=="NaN"||ObjVal("qTo")==null||nNoT==0){ alert("Not a number!"); return;} else alert("It is a number!") I aim to verify that only numbers ...

html