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

Can I inspect the HTML source of GWT?

How can I access the HTML source code generated by GWT? Currently, I only see the DIV with a specific ID when viewing the source. Is there a way to view the entire HTML output? Is it possible to design my table in HTML using divs and lists, then wrap it i ...

javahtmlgwt

Obtain and display pictures in HTML

I am working on a code snippet that fetches images from a directory and displays them in HTML. The issue I'm facing is that the images in the directory keep changing every second, causing problems on mobile browsers where the cached images are not bei ...

javascriptandroidhtmlimageviewer

Display an image with HTML

My current project involves creating a chrome extension that will display a box over an image when hovered, while also zooming the image to 1.5 times its original size. In my research, I came across a similar example. .zoomin img { height: 200px; wi ...

javascriptjquerycsshtml

Creating an animated Gif using HTML and CSS styling

I am trying to create an effect where a .gif animation plays once when the mouse hovers over a specific image. I have one static image in PNG format and one animated gif. The goal is for the gif to play every time the mouse is hovered over the png image. ...

htmlcssanimation

Creating visual representations from information gathered in SQL Server, utilizing nodejs to generate the graph, and presenting the results in HTML

I have successfully established a connection to my database in server.js, and I am able to retrieve data and view it in the terminal. However, presenting this information in HTML, or even creating a graph to display it, has been a challenge. Any helpful ...

htmlsql-servernode.js

jQuery puzzle: a form within a form within a form

I am facing a bit of a dilemma with a partially working solution. The scenario is this - I am using a basic .load() function attached to a <select> element to fetch another form populated through PHP/MySQL. What I intend to achieve is for this newly ...

phpjavascriptjqueryhtmlajax

Create an unordered list using the <ul> tag

Creating a ul as input is my goal, similar to this example on jsfiddle: http://jsfiddle.net/hailwood/u8zj5/ (However, I want to avoid using the tagit plugin and implement it myself) I envision allowing users to enter text in the input field and upon hitt ...

javascriptjqueryhtmlcss

The onload event for windows does not fire

I am currently working on a project that requires the use of tabbing control with flyingbox. To achieve this, I consulted the following link: After referring to the above link, I made some modifications to my project. I am retrieving details from another ...

javascriptjqueryasp.netcsstabs

Interacting with a JavaScript button using C# WebBrowser

Can someone please assist me with a problem I'm facing? I have a webpage coded in HTML and Javascript. Whenever I use webBrowser1.Document.GetElementById("hmenu").InvokeMember("click");, the menu pops up on my screen. However, I am unsure how to cli ...

c#javascripthtmlbrowser

Is it possible to assign numerical values to attributes in HTML code?

I'm unsure about something - is it possible to set an attribute value as a number? For example: <div data-check="1"></div> Is this the correct way to do it or not? I've heard conflicting opinions, with some people saying you shouldn ...

javascripthtml

Guide on incorporating the Chain Pattern alongside the Self Revealing Module Pattern within JavaScript

I have come across the following code snippet: filtersManager = (function ($) { var that = this; function initialize() { // some tasks return that; }; function execute() { // some tasks return that; ...

javascriptjqueryhtmlmodule-pattern

Discover the interactive world of HTML5 Canvas on iPhone with exciting highlights triggered by touchstart or mousedown

The canvas changes to a darker color when touched and held, reverting back to normal when the touch is released. This effect is similar to how hyperlinks are highlighted on an iPhone, not like text selection. To implement this feature, I am using jQuery t ...

jqueryiphonehtmlcanvas

Evaluating the layout of a webpage with each new code update

I'm currently in search of a testing framework to evaluate the frontend and design aspects of my application. We are developing an Angular application and utilizing Protractor for end-to-end tests, but I am curious about how to test the visual design ...

cssangularjstesting

Aligning a series of images with individual captions in the center

I am currently working on centering a row made up of four images along with their respective captions underneath. The code I am using is as follows: <div class="clear" style="text-align: center;"> <div style="float: left; padding-right: 10px;"& ...

htmlcss

The Bootstrap glyphicon content breaks when using ASP.NET MVC minification

When working with asp.net, I noticed that minification tends to disrupt the display of bootstrap UTF symbols. For example, here is what it looks like in the original file: .glyphicon-edit:before { content: "\e065"; } And here is how it appears in ...

css.netasp.net-mvctwitter-bootstrapbundling-and-minification

Using the symbols '&', '>', and '*' in the styling of React components

Below is the code snippet in question: const useStyles = makeStyles(theme => ({ row: { '& > *': { fontSize: 12, fontWeight: 'bold', color: 'rgba(33,34,34,0.5)', letterSpacing: 0.5, ...

javascriptcssreactjsmaterial-uistyling

What is the process of creating a download link for a server file in a web browser?

I am attempting to create a straightforward download link for a PDF file that users can upload and then have the option to download. I would like this download feature to appear either in a pop-up box or simply on the Chrome download bar. Despite trying v ...

javascriptphpjqueryhtmlpdf

Why is the jQuery class not responding to the is(:visible) selector?

Having trouble with this issue, I created a fiddle to demonstrate what I'm trying to achieve: http://jsfiddle.net/x2btM/9/ Below is the code snippet: <div id="ZodOneDragBox"> <div id="aquariusSelectedComp1" class="killSelectedComp1" sty ...

javascriptjqueryhtml

Examining the false positive detection of an apparent visibility issue with

My goal is to check if the document is NOT scrollable using this code snippet: $el = document.documentElement const noscroll = $el.clientHeight === $el.scrollHeight // false console.log($el.clientHeight) // 977 console.log($el.scrollHeight) // 991 consol ...

htmlgoogle-chromevue.js

Text that sparkles: one part in italics, one part not?

Within my shiny app, I have a textOutput component called "acronym" where I intend to display some text with half non-italicized and half italicized. My attempted approach was as follows: output$acronym_1 <- renderText(paste("SID SIDE:", tags$em("Side ...

htmlshinyitalics