Embed an responsive youtube iframe to center of an page

Question

Below is my code, i am trying to center an iframe , but its always going to left !Here is fiddle http://jsfiddle.net/4yL4od8j/

.videowrapper { 
text-align : center;
    float: none;
    clear: both;
    width: 100%;
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 25px;
    height: 0;
}
.videowrapper iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
max-width: 700px;
max-height: 400px;
}

my html

     <center> <div class="videowrapper "><iframe src="http://www.youtube.com/embed/VA770wpLX-Q?&rel=0&theme=light&autohide=1&color=white" frameborder="0" allowfullscreen></iframe></a></div></center>

Possible duplicate of [How can I align YouTube embedded video in the center in bootstrap](https://stackoverflow.com/questions/22433616/how-can-i-align-youtube-embedded-video-in-the-center-in-bootstrap) — T.Todua, Aug 08 '17 at 18:23

score 3 · Accepted Answer · answered Nov 25 '14 at 12:40

3

To make you frame center you need to give your videowrapper a specific width and make the margin left and right as auto.

.videowrapper { 
        float: none;
        clear: both;
        width: 700px;<-- Added-->
        position: relative;
        padding-bottom: 56.25%;
        padding-top: 25px;
        height: 0;
        margin: 0 auto;<-- Added-->
        max-width: 100%;<-- Added-->
    }

Working fiddle

Despite you wanna make your frame responsive always use max-width: 100% to your videowrapper.

answered Nov 25 '14 at 12:40

Benjamin

2,612
2
20
32

2

this doesn't make it responsive..please check the title – Vishnu Nov 25 '14 at 12:42
1

you making your iframe positioned absolute and positioned it to top and left `0` so this stick to its relative elements make sure your `center` tag is positioned relative and style accordingly. – Benjamin Nov 25 '14 at 12:49
may be this [trick](http://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php) will help you. :) – Benjamin Nov 25 '14 at 12:52
i copied the code from there only :p but if i set max width and height it gets messed.. – Vishnu Nov 25 '14 at 12:56

Boris Gafurov · Answer 2 · 2018-12-17T15:30:30.883

3

without css solution. iframe can align itself in the text paragraph, so put it in empty paragraph with text-align:center

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

edited Dec 17 '18 at 15:30

answered Dec 17 '18 at 15:09

Boris Gafurov

1,427
16
28

score 0 · Answer 3 · answered Nov 25 '14 at 12:41

0

Try this:

<div align="center">
<div class="videowrapper "><iframe width="560" height="315"         src="http://www.youtube.com/embed/VA770wpLX-Q?&rel=0&theme=light&autohide=1&color=white" frameborder="0"   allowfullscreen></iframe></a></div>
</div>

answered Nov 25 '14 at 12:41

Phasmatis

1
1

Surely having inline styles like width="560" height="315" on the iframe element will override any css declarations. – lharby Nov 25 '14 at 12:44
you tested it with the users css overriding or just the html code? – Jon May 27 '15 at 13:44

Embed an responsive youtube iframe to center of an page

3 Answers3