Is there a way to expand this embedded video so that it spans the entire width of the screen

I have a code snippet with one row and two columns. I would like to embed a video from Vimeo in the first column so that it fills the entire column without any padding. Additionally, I want the two columns to be right next to each other with no space between them.

.video iframe {
    width: 100%;
}
.lesson-pager {
    background-color: #00000081;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
                <div class="row video-row no-gutters">
                    <div class="col-lg-8">
                        <div class="video">
                            <iframe src="https://player.vimeo.com/video/42582007" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
                        </div>
                    </div>
                    <div class="col-lg-4 lesson-pager">
                        <div class="lesson-title">
                            <h4>Lesson title</h4>
                        </div>
                    </div>
                </div>
            </div>

htmlcssiframebootstrap-4

Answer №1

If you are utilizing bootstrap-4, take advantage of the embed utility to ensure it stretches to 100% width.

.video iframe {
  width: 100%;
}

.lesson-pager {
  background-color: #00000081;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="container">
  <div class="row video-row no-gutters">
    <div class="col-lg-8">
      <div class="video embed-responsive embed-responsive-16by9">
        <iframe class="embed-responsive-item" src="https://player.vimeo.com/video/42582007" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
      </div>
    </div>
    <div class="col-lg-4 lesson-pager">
      <div class="lesson-title">
        <h4>Lesson title</h4>
      </div>
    </div>
  </div>
</div>

Answer №2

If you want to cover the full area using CSS, here is a trick you can use:

.lesson-pager {
    background-color: #00000081;
}
.video{
  position: relative;
    padding-top: 56.25%;
}
.video iframe{
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet"/>

<div class="container">
<div class="row video-row no-gutters">
    <div class="col-lg-8">
        <div class="video">
            <iframe src="https://player.vimeo.com/video/42582007" width="640" height="360" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
        </div>
    </div>
    <div class="col-lg-4 lesson-pager">
        <div class="lesson-title">
            <h4>Lesson title</h4>
        </div>
    </div>
</div>
</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

The basic jQuery script seems to be malfunctioning

I am trying to attach an on click event to an li element using jQuery. I have written a simple jQuery code within the document ready function, but for some reason it is not functioning as expected. I have checked in both Chrome and Firefox, and there are n ...

javascriptjqueryhtml

Vue.js is displaying one less item

Recently I started working with Vuejs and encountered an unexpected issue in my application. The purpose of my app is to search for channels using the YouTube API and then display those channels in a list. However, when I try to render the list of subscri ...

javascripthtmlvue.jsvuejs2

If a table column lacks an unspanned cell, IE will disregard its width

Here is a visual representation of the issue I am facing: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <body> <table border="1"> <colgroup> <col ...

htmlhtml-tableinternet-explorer-9colgroup

Automatically numbering text boxes upon pressing the enter key

Is there a way to automatically number textboxes when I type "1" and hit enter in one of them? For example, if I have 3 textboxes and I type "1" in the first one, can the other textboxes be numbered as 2 and 3 accordingly? <input type="text&qu ...

javascripthtml

Additional cushioning is added when utilizing the X-UA-Compatible meta tag

After experimenting with various meta tags in the <head> section of my static HTML page, I have found that using <meta http-equiv="X-UA-Compatible" content="IE=edge" /> allows me to access newer CSS elements such as table:last-of-type in IE9. ...

htmlinternet-explorermeta-tagsx-ua-compatibleblank-line

Is it possible to serialize the entirety of a website's Javascript state, including Closure/Hidden scopes?

My goal is to capture a "snapshot" of a webpage while maintaining its interactive functionality, allowing all Javascript states to be saved and restored. An example scenario where this would be beneficial is when a webpage contains script that utilizes glo ...

javascripthtmlgoogle-chrome-extensionfirefox-addon

Navigation is failing to float in the correct position

Having issues with my navigation positioning, specifically when it reaches the breakpoint. There's a strange gap on the right side that I can't seem to fix by adjusting padding or margin settings. I'm relatively new to this so please bear wi ...

htmlcss

Invoke the designated JavaScript function within a subordinate <frame>

Below is an example of the standard HTML structure for a parent page named "index.html": <html> <head> <title>test title</title> </head> <frameset cols="150,*"> <frame name="left" src="testleft.html"> ...

c#javascripthtmldom

Searching for a specific value within a list that has been fetched from a database using AngularJs can be achieved by simply clicking on the search button

Seeking assistance on a search functionality issue. I am able to filter search results from a list retrieved from the database and displayed on an HTML page, but facing difficulty in getting complete search results from the controller. When clicking the se ...

javascripthtmlangularjs

Is there a way to showcase an epub format book using only HTML5, CSS, and jQuery?

Can ePub format books be displayed in a web browser using only HTML5, CSS, and jQuery? I would appreciate any suggestions on how to accomplish this. Additionally, it needs to be responsive so that it can work on iPad. While I am aware of this requirement, ...

javascriptjqueryhtmlcssepub

Enhance your website with a dynamic jQuery gallery featuring stunning zoom-in

I am currently working on a mobile website project and I'm in need of a gallery feature that allows users to zoom in on images and swipe through them using touch gestures. After some research, I haven't been able to find a suitable solution in j ...

javascriptjqueryhtmlmobile

Tips for adjusting div content to fit a fixed height on all devices

Looking to adjust the size of the #left-content div based on the height of the window, while ensuring that all content is visible within the fixed #left-bg. However, when viewing on mobile or tablet devices, the content appears hidden. .left-bg{ backgro ...

javascriptcsshtml

javax.el.MethodNotFoundException: JSP method cannot be located

While compiling the JSP template, I encountered the following exception: The method getFriendImage() is not recognized I attempted to rebuild the class without success. The src attribute contains a valid link to an image that is functioning properly. ...

javahtmlcssjsp

Ways to display the ChaptersButton in Videojs-Player

I'm trying to incorporate videojs (version 8.10.0) into my project and provide viewers with a way to select chapters within the video. According to the official documentation, it seems that simply including a track element linking to a VTT file within ...

javascripthtmlvideovideo.js

Challenges with parsing JSON using jQuery

I am attempting to retrieve data from a page that returns JSON in order to store it in an array. The current code is functional, but I am encountering difficulties when trying to pass the variable (which should contain the content) into the jQuery.parseJSO ...

javascriptjqueryhtmljson

Tips for making rounded corners with CSS styling

Can someone help me create a border like the one shown in this image? https://i.stack.imgur.com/b0GIa.png .child::before { content: ""; position: absolute; width: 13px; height: 13px; left: -1px; background: transparent; border-bott ...

htmlcss

Guide on making a prev/next | first/last button functional in list.js pagination

Is there a way to enhance my paginated index by adding prev/next, first/last buttons? I am curious if anyone has implemented these features using List.js. <script src='//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js&ap ...

javascriptjqueryhtmlcsslist.js

Personalized jQuery Slider with automatic sliding

I am currently working on creating my own image slider without relying on plugins. 1st inquiry : How can I achieve horizontal animation for the slider? 2nd inquiry : I want the images to cover both the height and width of their container while maintainin ...

javascriptjqueryhtmlcssslide

Is there a way I can edit this text on the backend page?

Currently, I am attempting to implement a scrolling text box on a front-end page that will display the content from a text file named "msg.txt". <div class="scroll-slow"> <?php echo file_get_contents('../msg.txt'); ?> </div> ...

phphtml

Tips for creating an animated effect on the active tab when it switches

Currently, I have a tab list containing li items. When an item is active, the li item has rounded corners and a box shadow effect. My goal is to add an animation that shows the active pill moving to its next position when it changes, but I am unsure of how ...

htmlcssreactjs