Phuong Phuong - 1 month ago 8
CSS Question

Embedded Youtube videos float to the right when viewed on phone

I'm making a responsive website and I have a few Youtube videos on it. When I view my site on > 479px resolution, the videos stay at the center, but when I view on phone screen resolution or when I scale down my browser to < 480px, the videos float all the way to the right. Right now Im using text-align: center to center the video.

Here's my code:




.youtube{
text-align: center;

}

<p class="youtube">
<iframe width="560" height="340" src="https://www.youtube.com/embed/Ubl3r5mGRtg" frameborder="0" allowfullscreen></iframe></br>

<iframe width="560" height="340" src="https://www.youtube.com/embed/xgr38LWUf7w" frameborder="0" allowfullscreen></iframe></br>
<iframe width="560" height="340" src="https://www.youtube.com/embed/ylT54zdmGCk" frameborder="0" allowfullscreen></iframe>
</p>




Answer

You could add to your css:

iframe { max-width: 100%; }

And maybe fix the height with some media queries.

Comments