Tips for adjusting the size of iframe content to fit its div area in Bootstrap 4 when the window is minimized

I recently started building a website and encountered an issue with resizing the window to fit an iframe containing a video within a div. I'm unsure where exactly in the CSS code I need to make adjustments for this. Can someone help me out?

The website is utilizing Bootstrap 4.3.1 and JQuery 3.4.1. I've already attempted setting the width and height of the div's class to 100% and auto, but the video still appears small on the page.

index.html

<div id="resources" class="offset">

<div class="fixed-background">

   <div class="row dark text-center">

      <div class="col-12">
         <h3 class="heading">Sewa dari Tiga Kota Besar di Sumatera</h3>
            <div class="heading-underline"></div>
      </div>

      <div class="col-md-4">
          <h3>Medan</h3>
            <div class="resource">
               <img class="boxshadow" src="images/icon-medan.jpg">
            </div>
            <a class="btn btn-secondary btn-sm" href="#" target="_blank">Pesan Disini</a>
       </div>

       <div class="col-md-4">
           <h3>Palembang</h3>
           <div class="resource">
              <img class="boxshadow" src="images/icon-palembang.jpg">
           </div>
           <a class="btn btn-secondary btn-sm" href="#" target="_blank">Pesan Disini</a>
       </div>

       <div class="col-md-4">
          <h3>Padang</h3>
             <div class="resource">
                <img class="boxshadow" src="images/icon-padang.jpg">
             </div>
             <a class="btn btn-secondary btn-sm" href="#" target="_blank">Pesan Disini</a>
       </div>   

       <div class="col-5 mx-auto">
          <div class="resource">
             <div class="heading-underline"></div>
                <!-- 16:9 aspect ratio, THIS IS THE SUITE ONE-->
                <div class="embed-responsive embed-responsive-16by9">
                   <!-- "..?playlist=(embedded-link)&loop=1" is for repeated the same videos that played -->
                   <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/Y-1H27WxaJo?playlist=Y-1H27WxaJo&loop=1" allowfullscreen autoplay></iframe>
                </div>
          </div>
       </div>

   </div><!-- End Row Dark -->
   <div class="fixed-wrap">
      <div class="fixed"><!-- class fixed is where we add the background image -->

      </div> 
   </div>

</div><!-- End Fixed Background -->

</div>

style.css

(Style.css content unchanged from original)

I am hoping that modifying the CSS will enable the video content within the iframe to properly fill the designated div area in the output of index.html. Currently, the video appears smaller than intended when the window is resized.

You can view the current output image here: https://drive.google.com/file/d/14NmUs8d_9SzLKKsxiUUXFCwzCXmBTyIV/view?usp=sharing

jqueryhtmlcssbootstrap-4

Answer №1

It seems like the parent div of the iframe with the class 

<div class="col-5 mx-auto">
has a narrower width for smaller views due to the use of the class col-5. This means it will occupy 5 columns on all devices. To make the iframe larger on small devices, you can change the parent div's class from col-5 to col-lg-5, so it only takes up 5 columns on large devices and 12 columns (100% width) on small devices.

<div class="col-5 mx-auto"> // Before, update as below

<div class="col-lg-5 mx-auto"> // After


/* Underline below section title */
.heading-underline{
   width: 3rem;
   height: .2rem;
   background-color: #1EBBAE;
   margin:0 auto 2rem; /* Format: top left&right bottom */
}
/* End underline below section title */
h3.heading{
   font-size: 1.9rem;
   font-weight: 700;
   text-transform: uppercase;
   margin-bottom: 1.9rem;
}
/*--- Bootstrap Mobile Gutter Fix --*/
.row, .container-fluid {
   margin-left: 0px!important;
   margin-right: 0px!important;
}

/*--- iOS Fixed Background Image --*/
.fixed-background {
   position: relative;
   width: 100%;
}
.fixed-wrap {
   clip: rect(0, auto, auto, 0);
   position: absolute;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   z-index: -999!important;
}
.fixed {
   position: fixed;
   display: block;
   top: 0;
   left: 0;
   width: 100%;
   height: 100%;
   background-size: cover;
   background-position: center center;
  -webkit-transform: translateZ(0);
  transform: translateZ(0);
  will-change: transform;
}


/*--------------------- Resources Section---------------------------*/
.fixed{
   background-image: url(../images/2018-Jeep-Wrangler-front-02.jpg);
   z-index: -1;/* Makes background appear behind content */ 
}  
.dark{
   background-color: rgba(0, 0, 0, 0.75);
   color: white;
   padding: 7rem 2rem;/* Format: top&bottom left&right.*/
}
.fixed-background h3{
   ...
}
...
.resource img:hover{
   opacity: 1;
   filter: alpha(opacity=100); /* For IE8 and earlier */
}

...

@media(max-width: 767px){
   .col-5 .resource iframe{
      width: 100%;
      height:auto;
   }
}
<link
      rel="stylesheet"
      href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
      integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T"
      crossorigin="anonymous"
    />
    
<div id="resources" class="offset">

<div class="fixed-background">

   <div class="row dark text-center">

      <div class="col-12">
         <h3 class="heading">Sewa dari Tiga Kota Besar di Sumatera</h3>
            <div class="heading-underline"></div>
      </div>

      ...
       </div>

       <div class="col-lg-5 mx-auto">
           <!-- The responsive video iframe goes here -->         
       </div>

   </div><!-- End Row Dark -->
   <div class="fixed-wrap">
      <div class="fixed"><!-- This is where the background image appears -->

      </div> 
   </div>

</div><!-- End Fixed Background -->

</div>

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

Acquire HTML information using the Robot framework and xpath techniques

My first task is to visit the website www.google.de. I aim to extract the word Deutschland from this section of the HTML code: <div class="logo-subtext">Deutschland</div> Since the id in this div class is not available, I must utilize xpath. ...

htmlseleniumxpathrobotframework

Navigating the complexities of applying CSS exclusively to child grids within Kendo Angular may seem challenging at first

This image illustrates the grid layout I have created an angular UI using kendo that features a nested grid. I am trying to apply CSS specifically to the child grid without affecting the parent grid. However, no matter what CSS I write, it ends up being a ...

cssangularkendo-grid

Run the document.ready function following an AJAX post request

In my custom.js file, I have multiple elements with click and other methods attached to them. All of this is enclosed within document.ready(). Everything functions as expected, but when I make an AJAX post, document.ready() doesn't get triggered again ...

jqueryajaxruby-on-rails-3postdocument-ready

XML, XTL, and HyperText Markup Language (HTML)

I am facing a challenge with transforming a list in an XML file into an HTML view using XSLT. The nesting of the lists is causing issues and the output is not meeting my requirements. XML: <book-part> <list id="ch4list2" list-type="simple"> & ...

htmlxmlxslt

Encountering a 500 Error When Sending Data to ASMX Web Service Using jQuery: "Invalid Response Format Error 500"

Recently, I created a webservice located at . This webservice is practically identical to a script I quickly put together using jQuery to send mail via POST method. The script is quite straightforward: function ContactSubmit() { var Name = $('input: ...

jqueryajaxpost

Display a modal when clicking on a bootstrap glyph icon

I tried following a tutorial on how to create a Bootstrap modal at https://www.w3schools.com/bootstrap/bootstrap_modal.asp However, I would like to use a glyph icon in the code snippet like this: <span class="glyphicon glyphicon-pencil" class="btn btn ...

csstwitter-bootstrap

Updating JSON when the color changes in Go.js can be achieved by implementing event listeners and

I've been using Go.js for creating Flow charts and saving the json data into a SQL database. However, I'm facing difficulties in updating the json data. Here is the code snippet: myDiagram.addDiagramListener("ChangedSelection", function (e1) { ...

javascriptjqueryjsongojs

"Resolving the Issue of jQuery Displaying NaN Value

I've got the code below, and it's all working smoothly. However, I'm encountering an issue where jQuery is returning $NaN when I try to run it through my WordPress theme using the format shown here: jQuery: jQuery(document).ready(function( ...

jquerywordpress

`Div Elements Overlapping`

Lately, I have been working on my personal portfolio and I encountered an issue with the contact form overlapping the footer. Can anyone provide some guidance on how to resolve this? Any help is greatly appreciated. https://i.stack.imgur.com/neIbs.gif ...

htmlcssoverlapping

Use MySQL and PHP to selectively filter records by choosing a specific option from a drop-down menu

Within my HTML webpage, I have a drop-down menu featuring various company names as options. When selecting a particular company, I can retrieve the associated records successfully. However, I would like to include an "All" option at the top of the list, ...

phpjquerymysqlajax

Issue with mouse hover not triggering overlay effect between two div elements

I am trying to display articles in a 2x3 matrix with article details like image, title, author, and description wrapped inside a div. I want this entire div to be overlapped by another div of the same dimensions containing a single image. Below is a snipp ...

jqueryhtmlcss

Make the mp3 file automatically download/save as by forcing the link

My website has links to mp3 files using normal <a href="file.mp3"> tags. However, many users with Apple Quicktime installed experience the mp3 files opening instead of saving when clicking on the links. Is there a way to force the browser to save t ...

c#javascripthtml

Control the playback of individual HTML5 audio elements using jQuery for seamless user experience

How can I modify the code to ensure that only one HTML5 audio element plays at a time? Currently, all tracks are able to play simultaneously. I am using jQuery for play and pause functionalities. If one track is playing and another is clicked on, how can ...

javascriptjqueryhtmlaudioplayback

Adding the active class in Bootstrap can be easily achieved in CodeIgniter by using the

I am seeking guidance on how to add an active class in CodeIgniter when dividing the view into three separate files. These files include: header.php page1.php ... page10.php footer.php According to this thread, there seems to be no clear solution prov ...

phpjquerycsscodeigniter

Error in Layout of Navigation Panel and Tabbed Pages

Working on a school project, I encountered a challenge. I found two useful solutions from the W3 website - a sticky navigation bar and the ability to include tabs on a single page for a cleaner presentation of information. However, when trying to implement ...

javascripthtmlcssformattinguinavigationbar

What could be causing my Wikipedia opensearch AJAX request to not return successfully?

I've been attempting various methods to no avail when trying to execute the success block. The ajax request keeps returning an error despite having the correct URL. My current error message reads "undefined". Any suggestions on alternative approaches ...

javascriptjqueryajaxwikipediawikipedia-api

React Array Not Behaving Properly When Checkbox Unchecked and Item Removed

When using my React Table, I encountered an issue with checkboxes. Each time I check a box, I aim to add the corresponding Id to an empty array and remove it when unchecked. However, the current implementation is not functioning as expected. On the first c ...

javascripthtmlarraysreactjsnext.js

Eliminate or conceal styling for this element

Is there a way to remove the last right border in a row of links? #mainMenu a { display: block; float: left; height: 20px; padding: 0px 10px 2px 10px; border-right: 1px solid #cfcfcf; font-size: 16px; font-weight: bold; font-family: arial, verdana, ' ...

jquery

What is the best way to deactivate all input fields, dropdowns, and text areas within the titlediv_1274837

I have a function that I intended to disable all the input, select, and textarea elements within the titlediv_1274837 div. However, when I execute the function, it does not work as expected. I've tried using both a single jQuery statement and an each ...

jquery

How can I format an array of objects for sorting in javascript?

Trying to implement a sortable list on my view has been challenging. Each row entry is stored as an object in an array, causing issues with string values disrupting the sorting process. This code utilizes Angularjs for implementation. Experimenting with ...

jqueryangularjsasp.net-mvcforeach