Vertically Center Responsive Iframe

Vertically center responsive iframe

So I figured this out after 2 minutes of posting :)

Making .embed-resposive absolutely positioned with top:50% and margin top set to half the height ratio (video height / video width) / 2 I can center it vertically:

.embed-responsive {
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    /* video height / video width */
    padding-bottom: 56.2%;
    /* the above value * 0.5 */
    margin-top: -28.1%;
    height: 0;
    overflow: hidden;
}

Fiddle has been updated.

Horizontally and vertically centered iframe with aspect ratio 16:9 that uses as much screen estate as possible without being cropped anywhere

Using JavaScript, you can listen for the resize event, which fires whenever the browser's window changes shape. Then, with some simple algebra you can calculate the dimensions of the iframe based on the dimensions of the container. Here is a demo that shows all of the requirements.

"use strict";
var container = document.querySelector('.container');var frame = container.querySelector('iframe');
function resizeVideo() { frame.width = frame.height = 0;
 var width = container.offsetWidth; var height = container.offsetHeight;
 if (height * (16 / 9) <= width) {  frame.height = height;  frame.width = height * (16 / 9); } else {  frame.width = width;  frame.height = width * (9 / 16); }}
window.addEventListener('load', resizeVideo);window.addEventListener('resize', resizeVideo);

.container { width: 90vw; height: 50vh;
 display: table-cell; text-align: center; vertical-align: middle;}

<div class="container"> <iframe src="https://www.youtube.com/embed/BKhZvubRYy8" frameborder="0" allowfullscreen></iframe></div>

How to center an iframe, responsive

Would this be what you're trying to do ?

.map-container iframe {
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
}

Or this ? (without absolute positioning)

.map-container iframe {
    width: 50%;
    display: block;      
    margin: auto;
}

It depends if you want to center it vertically as well or not.

Need responsive iframe (div) / fixed aspect ratio / centered horizontally and vertically / that SCALES itself so it's not getting browser-cropped

Taken from Bootstrap 3.0, just apply the CSS class and whether it should be 16 by 9 or 4 by 3:

JSfiddle with the result: http://jsfiddle.net/crisbeto/jvcg8v0y/

/* Embeds responsive

Credit: Nicolas Gallagher and SUIT CSS. */

.embed-responsive {
  position: relative;
  display: block;
  height: 0;
  padding: 0;
  overflow: hidden;
}
.embed-responsive .embed-responsive-item,
.embed-responsive iframe,
.embed-responsive embed,
.embed-responsive object {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  height: 100%;
  width: 100%;
  border: 0;
}
.embed-responsive.embed-responsive-16by9 {
  padding-bottom: 56.25%;
}
.embed-responsive.embed-responsive-4by3 {
  padding-bottom: 75%;
}

Responsive iFrame video scaled, but won't center

Just change css to get center

.videoWrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    right:0;
    margin:auto;
}

html,body {  margin: 0;  padding: 0;}
.videoWrapper {  position: relative;  padding-bottom: 56.25%;  height: 0;  padding-top: 20px;  overflow: hidden;}
.videoWrapper iframe {  position: absolute;  top: 0;  left: 0;  right: 0;  margin: auto;}

<div class="videoWrapper">  <iframe width="530" height="315" src="https://www.youtube.com/embed/4OJWC1tn_t4" frameborder="0" allowfullscreen>    </iframe></div>

How to center an iframe while retaining responsiveness

Add this CSS to your page to center the iframe and make it reponsive:

iframe {
  display: block;
  margin: 0 auto;
  max-width: 960px;
  width: 100%;
}

Remove scrolling="no" to allow iframe to be scrolled when page width is less than iframe width

---

Related Topics