What is the best way to center align a YouTube embedded video using bootstrap?

Question

What is the best way to center align a YouTube embedded video using bootstrap?

I'm having trouble centering a YouTube embedded video on my Bootstrap page. The video size is always the same.

My html code is simple:

<div class="video">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div>

I've tried various solutions from stackoverflow, but they only address centering a div, not a video. The best result I could achieve was with this fiddle.

I attempted solution1, solution2, and solution3 without success. Another somewhat successful solution was using:

width: 50%;
margin: 0 auto;

While this worked on desktop, it failed on iPad or phone as the video extended beyond the screen. How can I properly center the video on desktop, tablet, and phone?

css twitter-bootstrap youtube

Answer 1

Answer №1

One important thing to remember is that "Bootstrap" consists of a collection of CSS rules

Check out this code snippet on JSFiddle

HTML

<div class="your-centered-div">
    <img src="http://placehold.it/1120x630&text=Pretend Video 560x315" alt="" />
</div>

CSS

/* Important styles */
.your-centered-div {
    width: 560px; /* Size is necessary for this method to work properly */
    height: 315px; /* Consider using max-width instead for better responsiveness */

    position: absolute; /* Positioned relative to the nearest parent element */
    top: 0; right: 0; /* Play with these values to adjust positioning */
    bottom: 0; left: 0;
    margin: auto; /* Center align horizontally and vertically */
}

View the complete example on JSFiddle here.

EDIT

This is my preferred method nowadays:

Pure CSS approach

.centered-thing {
    position: absolute;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

If you use stylus/mixins (which I highly recommend)

center-center()
    absolute()
    margin auto
    top 50%
    left 50%
    transform translate(-50%,-50%)

This technique eliminates the need to specify the element's size, as the translate function is based on its own dimensions - Neat trick!

Answer 2

One important thing to remember is that "Bootstrap" consists of a collection of CSS rules

Check out this code snippet on JSFiddle

HTML

<div class="your-centered-div">
    <img src="http://placehold.it/1120x630&text=Pretend Video 560x315" alt="" />
</div>

CSS

/* Important styles */
.your-centered-div {
    width: 560px; /* Size is necessary for this method to work properly */
    height: 315px; /* Consider using max-width instead for better responsiveness */

    position: absolute; /* Positioned relative to the nearest parent element */
    top: 0; right: 0; /* Play with these values to adjust positioning */
    bottom: 0; left: 0;
    margin: auto; /* Center align horizontally and vertically */
}

View the complete example on JSFiddle here.

EDIT

This is my preferred method nowadays:

Pure CSS approach

.centered-thing {
    position: absolute;
    margin: auto;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

If you use stylus/mixins (which I highly recommend)

center-center()
    absolute()
    margin auto
    top 50%
    left 50%
    transform translate(-50%,-50%)

This technique eliminates the need to specify the element's size, as the translate function is based on its own dimensions - Neat trick!

Answer 3

Answer №2

When embedding a Youtube video, iframe is commonly used. To center the iframe, you can use the following CSS:

iframe {
   display: block;
   margin: 0 auto;
}

Answer 4

When embedding a Youtube video, iframe is commonly used. To center the iframe, you can use the following CSS:

iframe {
   display: block;
   margin: 0 auto;
}

Answer 5

Answer №3

<iframe style="display: flex; margin: auto;" width="760" height="415" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen></iframe>

Answer 6

<iframe style="display: flex; margin: auto;" width="760" height="415" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen></iframe>

Answer 7

Answer №4

No need to nest the <iframe> within a parent div at all. You can easily style just the YouTube iframes using CSS/3:

iframe[src*="//youtube.com/"], iframe[src*="//www.youtube.com/"] {
   display: block;
   margin: 0 auto;
}

Answer 8

No need to nest the <iframe> within a parent div at all. You can easily style just the YouTube iframes using CSS/3:

iframe[src*="//youtube.com/"], iframe[src*="//www.youtube.com/"] {
   display: block;
   margin: 0 auto;
}

Answer 9

Answer №5

To ensure that my video always fits the screen width, I set the max width to 100%. This way, on mobile devices, the video automatically adjusts to fit the screen width. Since the video itself is only 560px wide, I added a 10% left-margin to the iframe in the desktop CSS. As for the mobile CSS, I removed the margin to allow for full-width viewing without the need for additional div elements around each video.

Desktop CSS:

iframe {
margin-left: 10%;
}

Mobile CSS:

iframe {
margin-left: 0;
}

This method worked perfectly for implementing videos on my blog (Botanical Amy).

Answer 10

To ensure that my video always fits the screen width, I set the max width to 100%. This way, on mobile devices, the video automatically adjusts to fit the screen width. Since the video itself is only 560px wide, I added a 10% left-margin to the iframe in the desktop CSS. As for the mobile CSS, I removed the margin to allow for full-width viewing without the need for additional div elements around each video.

Desktop CSS:

iframe {
margin-left: 10%;
}

Mobile CSS:

iframe {
margin-left: 0;
}

This method worked perfectly for implementing videos on my blog (Botanical Amy).

Answer 11

Answer №6

To center content using Bootstrap's .center-block class, which adjusts left and right margin to auto:

<iframe class="center-block" width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>

Alternatively, you can use the .text-center class to set text-align: center:

<div class="text-center">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div>

Answer 12

To center content using Bootstrap's .center-block class, which adjusts left and right margin to auto:

<iframe class="center-block" width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>

Alternatively, you can use the .text-center class to set text-align: center:

<div class="text-center">
  <iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div>

Answer 13

Answer №7

<section>
    <iframe id="myFrame" src="https://player.vimeo.com/video/12345678?autoplay=1" width="640" height="360" frameborder="0" allowfullscreen> . 
    </iframe>
</section>

<script>
    function adjustFrame() {
        var screenWidth = window.innerWidth;
        var screenHeight = window.innerHeight;

        document.getElementById("myFrame").width = screenWidth ;
        document.getElementById("myFrame").height = screenHeight ;
    }

    adjustFrame();

    window.addEventListener('resize', function(){ adjustFrame(); });
</script>

this script dynamically resizes the Vimeo video by adding an id myFrame to the iframe

Answer 14

<section>
    <iframe id="myFrame" src="https://player.vimeo.com/video/12345678?autoplay=1" width="640" height="360" frameborder="0" allowfullscreen> . 
    </iframe>
</section>

<script>
    function adjustFrame() {
        var screenWidth = window.innerWidth;
        var screenHeight = window.innerHeight;

        document.getElementById("myFrame").width = screenWidth ;
        document.getElementById("myFrame").height = screenHeight ;
    }

    adjustFrame();

    window.addEventListener('resize', function(){ adjustFrame(); });
</script>

this script dynamically resizes the Vimeo video by adding an id myFrame to the iframe

Answer 15

Answer №8

Create an iframe with the attribute "align=middle" and insert it into a paragraph with the style "text-align:center":

<p style="text-align:center;">
<iframe width="420" height="315" align="middle" src="https://www.youtube.com/embed/YOURVIDEO">
</iframe>
</p>

Answer 16

Create an iframe with the attribute "align=middle" and insert it into a paragraph with the style "text-align:center":

<p style="text-align:center;">
<iframe width="420" height="315" align="middle" src="https://www.youtube.com/embed/YOURVIDEO">
</iframe>
</p>

Answer 17

Answer №9

For an IFramed YouTube video that is fully responsive, consider using the following code:

<div class="video-container">
<iframe width="854" height="480" style="margin: auto;" src="https://www.youtube-nocookie.com/embed/h5ag-3nnenc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

.video-container {    
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;    
}

.video-container iframe {   
    left:10%; //centers for the 80% width - not necessary if width is 100%
    top:0;
    height:80%; //adjust to 100% for full width
    width:80%;
    position:absolute;
}

Answer 18

For an IFramed YouTube video that is fully responsive, consider using the following code:

<div class="video-container">
<iframe width="854" height="480" style="margin: auto;" src="https://www.youtube-nocookie.com/embed/h5ag-3nnenc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

.video-container {    
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;    
}

.video-container iframe {   
    left:10%; //centers for the 80% width - not necessary if width is 100%
    top:0;
    height:80%; //adjust to 100% for full width
    width:80%;
    position:absolute;
}

Answer 19

Answer №10

<center><div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div></center>

It appears to be functioning properly, is this all that you needed? It could be possible to explore more complex solutions, but for now, this seems like a straightforward option.

Answer 20

<center><div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/ig3qHRVZRvM" frameborder="0" allowfullscreen=""></iframe>
</div></center>

It appears to be functioning properly, is this all that you needed? It could be possible to explore more complex solutions, but for now, this seems like a straightforward option.

Answer 21

Answer №11

To center a video on your website, you can use the tag. Although the tag is not supported by HTML5 and may show an error in some code editors like VS Code, it still works fine with YouTube videos. Simply open the tag before the tag.

Answer 22

To center a video on your website, you can use the tag. Although the tag is not supported by HTML5 and may show an error in some code editors like VS Code, it still works fine with YouTube videos. Simply open the tag before the tag.

What is the best way to center align a YouTube embedded video using bootstrap?

Answer №1

HTML

CSS

EDIT

Pure CSS approach

If you use stylus/mixins (which I highly recommend)

Answer №2

Answer №3

Answer №4

Answer №5

Answer №6

Answer №7

Answer №8

Answer №9

Answer №10

Answer №11

Similar questions

What is the best way to center align tabs in a Bootstrap 4 list?

Which is more optimal for importing CSS - using the link tag or style tag?

Include a flexible div in the hero section and change the position when resizing the screen

Content within a div that is floated left

Ways to solve the issue of the mobile dropdown menu in Bootstrap

What is the process for incorporating a side group input with Bootstrap?

"Enhance Your Design With CSS3 Styling for Labels and

The tooltip malfunctions when I incorporate the PHP variable

Issues with the background-image scroll feature not functioning as intended

Utilize a CSS selector to target all deleted nodes using the MutationObserver in the HTML5 API

Encountered issues while attempting to submit a form using Twitter Bootstrap, PHP, MySQL, and

Issue with drop-down menu functionality on mobile-friendly website

Is it possible to change the CSS of a parent element using a child element?

The banner <div> appears in Chrome but is not visible in IE9

Tips for handling CSS loading delays with icons in OpenLayers markers

Troubleshooting a problem with a personalized webkit scrollbar in Chrome

What could be causing the issue preventing me from applying a border in the code below?

Concealing the WordPress sidebar specifically for mobile phones, excluding iPads, tablets, and other devices

Issue with the height of content in Mobile Safari when using Bootstrap 4 columns

Evolving fashion trends