Embedded YouTube 16:9 aspect ration videos - this assumes you are embedded a YouTube video that has aspect ratio of 16:9 which is the typical HD video ratio
Video with NO responsiveness to browser width
Video WITH responsiveness to browser width
None!!! Purely HTML and CSS solution
Copy and paste the code below in your HTML where you want the video to appear. Change the UNIQUECODE to the unique code for YOUR video.
<div class="videoWrapper">
<iframe src="https://www.youtube.com/embed/UNIQUECODE?rel=0&vq=hd720" frameborder="0" allowfullscreen></iframe>
</div>
The ?rel=0 eliminates the grid of related videos after the video is complete.
The &vq=720hd forces the video player to show the video quality of 720HD which is better quality. Other options are:
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
max-width:853px;/*same width as video itself*/
width:100%;
margin:0 auto;/*centers the video*/
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
max-width:853px;/*change as desired*/
max-height:480px;/*if you change max-width, make sure the height has a ratio of 16:9*/
width: 100%;
height: 100%;
}