Responsive iframes

Responsive iframes
<div class="iframe-container"><iframe src="https://www.youtube.com/embed/mB1dE0FotdY" allowfullscreen="allowfullscreen"></iframe></div>
.iframe-container {
  overflow: hidden;
  /* 16:9 aspect ratio */
  padding-top: 56.25%;
  position: relative;
}

.iframe-container iframe {
   border: 0;
   height: 100%;
   left: 0;
   position: absolute;
   top: 0;
   width: 100%;
}

 

Don’t forget to lazy-load your iframes. In addition to making your iframes responsive, you’ll want to lazy-load them using the loading attribute. This improves page load times, enhances the user experience, and increases your search engine rankings. Learn more about how to lazy-load iframes.

<iframe src="https://www.benmarshall.me" loading="lazy" />

 

Other sample, embed other site content use iframe

Comments (0)
Join the discussion
Read them all
 

Comment

Hide Comments
Back

This is a unique website which will require a more modern browser to work!

Please upgrade today!

Share