You have to use responsive styling. For this you need an extra div as wrapper. With next html and css, the youtube will be as wide as the available space (in this css 90% of the available space). Ofcourse both width and height will resize to maintain the 16:9 ratio of an youtube movie.
<style>
.yt {
position: relative;
display: block;
width: 90%; /* width of iframe wrapper */
height: 0;
margin: auto;
padding: 0% 0% 56.25%; /* 16:9 ratio */
overflow: hidden;
}
.yt iframe {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 100%;
height: 100%;
border: 0;
}
</style>
<div class="yt">
<iframe width="560" height="315" src="https://www.youtube.com/embed/8Pa9x9fZBtY" allowfullscreen></iframe>
</div>
=============
You have to use responsive styling. For this you need an extra div as wrapper. With next html and css, the youtube will be as wide as the available space (in this css 90% of the available space). Ofcourse both width and height will resize to maintain the 16:9 ratio of an youtube movie.
