How to embed a responsive iframe youtube video in WordPress

HTML

<div class="iframe-container">
<iframe class="responsive-iframe" src="https://www.youtube.com/embed/VIDEO_ID frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

CSS

/* Responsive Youtube iframe video styles */
 .iframe-container {
   position: relative;
   overflow: hidden;
   width: 100%;
   padding-top: 56.25%; /* 16:9 Aspect Ratio (divide 9 by 16 = 0.5625) */
 }
 /* Then style the iframe to fit in the container div with full height and width */
 .responsive-iframe {
   position: absolute;
   top: 0;
   left: 0;
   bottom: 0;
   right: 0;
   width: 100%;
   height: 100%;
 }

Leave a Comment

Your email address will not be published. Required fields are marked *

Scroll to Top