Centering iframe div

Question

When coding an iframe to resize with the screen I cannot center it. I tried all the responses from THIS question but had no luck. Am I missing something obvious or is there no way to do this?

HTML

<div class="videoWrap">
    <iframe src="http://www.youtube.com/embed/playlist?list=PLn0iVeY0xhgZvWDQ1K_6EChZe_4TL5zDZ"></iframe>
</div>

CSS

.videoWrap {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrap iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 80%;
    height: 100%;
}

Are you trying to center the `iframe` in the `div`? Or the `div` in the screen? — blackandorangecat, Apr 20 '17 at 17:42
Don't forget to mark an answer if you feel one of these solutions helped. People are more likely to help you in the future if they see you have accepted answers. — blackandorangecat, Apr 21 '17 at 11:34

score 1 · Accepted Answer · answered Apr 20 '17 at 17:47

1

Using the question you linked...

.videoWrap {
  display: flex;
  align-items: center;
  justify-content: center;
}

.videoWrap iframe {
  width: 300px;
  height: 300px;
}

div, body, html {
  height: 100%;
  width: 100%;
}

<div class="videoWrap">
  <iframe src="http://www.youtube.com/embed/playlist?list=PLn0iVeY0xhgZvWDQ1K_6EChZe_4TL5zDZ"></iframe>
</div>

answered Apr 20 '17 at 17:47

blackandorangecat

1,246
5
18
37

This does use `flex` which is not supported in earlier versions of `IE` – blackandorangecat Apr 20 '17 at 17:51
This doesn't work when adding it to a website with multiple divs. – alohomoira Apr 25 '17 at 16:48
1

EDIT: This worked! However 'div,body,html {...}' is not necessary, especially in a website with multiple divs – alohomoira Apr 25 '17 at 16:57
@alohomoira I think you're correct - however is is required for the `jsfiddle`. Your website must have the height/width set elsewhere. Anyways, glad it helped! – blackandorangecat Apr 25 '17 at 17:02

score 0 · Answer 2 · answered Apr 20 '17 at 17:44

0

You can try applying margin: auto; css property to your div. https://www.w3schools.com/css/css_align.asp

answered Apr 20 '17 at 17:44

Tried this multiple times before questioning there. Thanks to! – alohomoira Apr 25 '17 at 16:49

score 0 · Answer 3 · answered Apr 20 '17 at 17:46

In my example I am centering the wrapper element horizontally and vertically with the usual settings (position: absolute` is applied here), and also defining the width and height here. The video itself simply fills the centered wrapper.

html, body {
  height: 100%;
  margin: 0;
}

.videoWrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 16:9 */
  width: 80vw;
  height: 45vw;
}

.videoWrap iframe {
  width: 100%;
  height: 100%;
}

<div class="videoWrap">
  <iframe src="http://www.youtube.com/embed/playlist?list=PLn0iVeY0xhgZvWDQ1K_6EChZe_4TL5zDZ"></iframe>
</div>

score 0 · Answer 4 · answered Apr 20 '17 at 17:46

0

Use left: 50% and transform: translateX(-50%):

.videoWrap {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    padding-top: 25px;
    height: 0;
}
.videoWrap iframe {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 80%;
    height: 100%;
}

answered Apr 20 '17 at 17:46

Toby

12,743
8
43
75

using 'transform:' it resized the video window – alohomoira Apr 25 '17 at 16:51

Centering iframe div

4 Answers4