Search code examples
htmlcssyoutubealignmentcenter

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>

Solution

  • You could add to your css:

    iframe { max-width: 100%; }

    And maybe fix the height with some media queries.