Make youtube video iframe full width 100% to container and height | Responsive Youtube Player

Youtube is providing easiest way to embed videos using iframe. For fixed height and width, this works fine. But for responsive designs, we have to do some CSS tricks. Lets go and learn the magic to make youtube video player responsive.

---

Youtube Responsive Video Player - HTML

---

 <div id="video-wrapper">
  <iframe width="560" height="315" src="###" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
 </div>

---

Youtube Responsive Video Player - CSS

---

 #video-wrapper {
     position: relative;
     padding-bottom: 56.25%; /* 16:9 */
     height: 0;
 }
 #video-wrapper iframe {
     position: absolute;
     top: 0;
     left: 0;
     width: 100%;
     height: 100%;
 }

Thats it guys. Simple right ?. Work on it and leave your valuable feedback on comments section.

Popular  searches for this thread

• Displaying a YouTube video with iframe full width of page
• How To Make a Responsive 100% Width YouTube iFrame Embed
• Embed a video at 100% width and keep aspect ratio?
• Responsive youtube player html
• Youtube iframe player responsive