CSS

Pure CSS solution to embed responsive youtube videos on web pages

2019-01-14

Embed responsive youtube videos on your website with pure CSS

Here is a quick solution for how to add youtube video on your website:

<u>HTML Code</u>:

<div class="video-container">
  <iframe
    width="640"
    height="360"
    src="//www.youtube.com/embed/ukKd8W3Bvo0"
    frameborder="0"
    allowfullscreen
  ></iframe>
</div>

<u>CSS Code</u>:

.video-container {
  position: relative;
  padding-bottom: 56.25%; /*16:9*/
  padding-top: 30px;
  height: 0;
  overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container embed {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

As a developer, I always see the problem for creating images/banners whenever I post some content online.

Even for simple designs I always needed to open figma or search online, so I thought of automating it.

I've build BannerPot to solve this problem, would you like to give it a try?

Ramesh from BannerPot

Ramesh Mhetre

Maker of BannerPot