How can I make a Bootstrap video embed fill the entire width of the screen?

I'm struggling to integrate a YouTube video into my webpage with Bootstrap, but I want it to span the entire width of the page.

Here's the HTML code:

<iframe class="embed-responsive-item youtube" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0"></iframe>

And the CSS code:

.youtube {
  width:100%;
}

You can view the JSFiddle demo here.

However, I'm facing two main issues:

  • The video preview gets cut off by the height when the webpage is resized to be larger (only half of the video preview is visible).

  • When the video starts playing, it remains in its small format.

Does anyone know how to resolve these issues using Bootstrap?

htmlcsstwitter-bootstrapbootstrap-4

Answer №1

If you're using Bootstrap version 3, you can create a full-width iframe with the following code:

<div class="embed-responsive embed-responsive-16by9">
    <iframe class="embed-responsive-item" src="https://www.vimeo.com/embed/89467483?wmode=opaque&amp;rel=0&amp;showinfo=1" allowfullscreen=""></iframe>
</div>

Answer №2

Although it may seem silly, my inspiration came from analyzing the code on Bootstrap's official website:

.embed-responsive{
  position: relative;
  padding-top: 56.25%;
}
.youtube{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
  
}

56.25% - this ratio is crucial, think of 16:9 and others ;)

Answer №3

By utilizing CSS and understanding aspect ratios, this issue can be resolved without the need for additional code. Simply update your selector from .youtube to the code below:

.embed-responsive {
  position: relative;
  width:100%;
  height: 0;
  padding-top: 56.25%;
}

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

This effectively sets the parent container of the YouTube iframe to span across 100% of the width while maintaining a 16/9 aspect ratio by setting the height to 0 and adding a padding top of 56.25%. The iframe is then positioned absolutely within its parent with both height and width set to 100%, ensuring it fills the container seamlessly.

Answer №4

To make sure your content stays responsive, remember to use the class container-fluid instead of container.

Here is the revised code snippet for you:

<section id="about" class="home-section text-center">
    <div class="container-fluid">
        <div class="row">
            <div class="embed-responsive embed-responsive-16by9">
                <iframe class="embed-responsive-item youtube" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0">
                </iframe>
            </div>
        </div>
    </div>
</section>

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

Highcharts plots only appear once the browser window is adjusted

Having some issues while testing out the Highcharts javascript charting library on a specific page. The problem I'm encountering is that none of the data appears until I adjust the browser's size slightly. Prior to resizing, the tooltip does dis ...

javascriptjqueryhtmlcsshighcharts

The modal window displays an error upon submission and prevents itself from closing

Below is the HTML code for a modal form: <form action="" class="cd-form" method="POST" id="signinform" onsubmit="return: false;"> <p class="fieldset" id="warningPanel"> <?php ShowAlertWarning(); ?> </p> <p ...

javascriptphpjqueryhtmltwitter-bootstrap

What is the best way to retrieve data from within HTML tags using PL/SQL?

Within my Oracle PL SQL project, I am dealing with an html file that contains the following comment tag. I need to figure out how to retrieve the value between these comment tags. <comment label="Comments">Text_to_Extract</comment>&l ...

htmloracleplsql

Using a variety of different font styles within a single sentence

I'm looking to add a title with text in one of my divs, but I want the title to be in 3 different font sizes. Any suggestions on how to achieve this without starting a new paragraph for each size change? Here's an example of what I'm trying ...

htmlcssfont-family

CSS - Button with upwards pointing arrow, requiring it to point downwards when hovered over

Struggling with the following issue: I have a button with a downward-pointing arrow in its description. When I hover over the button (or any content within it), I want the arrow to point upwards. However, currently, the arrow only points up when I hover ...

htmlcss

Is it advisable to store JSON data in data params instead of making an AJAX call?

Previously, I stored my component data within the element's data parameter. Should I continue doing this or switch to using an Ajax call to fetch the data? 1. Using data parameter: <a href="#" data-core="{JSON-data}" id="item-1"> <a href ...

jqueryhtmljsonajax

When switching windows or tabs, the user interface of the browser extension vanishes

As someone who is new to web application development and browser extension creation, I have encountered a challenge with my browser extension. When the extension popup is open and I switch browser windows, the UI (popup.html) disappears. It reappears whe ...

javascriptjqueryhtmlgoogle-chrome-extension

Insert some text into the div element. Create a new line

I'm looking to make a specific text on my webpage trigger a new line when displayed in a div. I've been struggling to figure out how to accomplish this: var original= "the text @n to change"; var changed = original.replace(/@n /g, '\ ...

javascriptjqueryhtml

Is there a way to trigger a function for both a left and middle click at the same time?

Check out this code snippet: $('a').on('click', function(){ myfunc($(this)); }); function myfunc(el){ console.log('Either left or middle click clicked on the link'); } a{ cursor: pointer; } <script src="https://aj ...

javascriptjqueryhtmlcss

Modifying a variable when a specific number of elements are clicked using jQuery

I have created a script for my portfolio that is functional but I want to streamline it so that I only need to edit the HTML, not the script itself. The main requirements for the code are: Count the number of <img> tags within the element with id ...

jquerycssvariables

Using Angular to swap out the component's selector with HTML code

Consider the following component: @Component({ selector: 'passport-cell', templateUrl: './passport-cell.component.html', styleUrls: ['./passport-cell.component.scss'] }) export class PassportCell { @Input() public la ...

javascripthtmlangularangular6

What is the best way to make the div inside the table cells expand to fill the available space?

I'm having trouble making the inner divs within table cell divs expand and fit their parent div without overlapping the next cell below it. Check out the sandbox for reference I've outlined the areas in grey where I want the cells to be filled. ...

css

Creating dynamic HTML elements for each section using JavaScript

Is there a way to dynamically add a task (input + label) for each specific section/div when entering the name and pressing the "Add" button? I attempted to create an event for each button to add a task for the corresponding div of that particular section, ...

javascripthtmldomaddeventlistener

Printing in HTML is limited to only one page

While printing an HTML table that can vary in length, I often encounter the issue of it printing multiple pages. Is there a way to limit the printing to just one page through coding? Yes, you can achieve this by using the option in the browser print dialog ...

javascripthtml

Utilize Bootstrap 4 classes on multiple td elements within a table

Is there a way to efficiently apply multiple Twitter Bootstrap 4.5 classes to various td tags without repetition or using jQuery? I am looking to streamline the code in order to reduce the amount of data within the HTML document. For example, if there are ...

cssbootstrap-4sass

Is there a way to customize the default settings for a blueprint’s menu item?

https://i.sstatic.net/aNeJY.jpg In my react project, I implemented the Menu using MenuItem from '@blueprintjs/core'. The issue I encountered is that when hovering over a Menu item with children, they open from the right side. Is there a way to m ...

htmlcssreactjsstyled-componentsblueprint

Is hard coding permissions in the frontend considered an effective approach?

I'm in the process of creating an inventory management system that allows admin users to adjust permissions for other employees. Some permissions rely on others to function properly, and I need to display different names for certain permissions on the ...

javascripthtmlangularuser-permissions

Is there a way to print an HTML page in Landscape mode within my Vue.js project?

I have been able to successfully print an HTML page in Landscape mode using the code below. <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width,maximum-scale=1.0"> ...

javascripthtmlvue.jsprintingvuejs2

Validating Angular Forms within a NgFor loop

Consider the scenario where there is a form implemented as shown below: <form #form="ngForm"> <div *ngFor="let action of member_plan.actions"> <div class="container"> <h4 class="text-sm-center black mb-3">{{ ...

javascripthtmlangularforms

Personalizing Bootstrap by utilizing the default Bootstrap variables

In my recent project, I delved into the world of customizing Bootstrap version 5.1.1. During this process, I came across the concept of `!default`, which requires defining customizations before importing Bootstrap variables. One challenge I faced was tryin ...

twitter-bootstrapsassbootstrap-5