How to create HTML CSS Youtube Embed Video Responsive

Here is simple way to make a youtube video Embed in Responsive.

Here is CSS Style to make iframe fits with Display

Just use CSS Code between <head>...</head>

style.css

Example: CSS

<style>
.video-container {
  position: relative;
  padding-bottom: 56.25%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>

Then, Use following HTML Code to view Youtube Video Embed

Just follow replace Youtube Video id what you want.

index.html

Example: HTML

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

Full Example of HTML CSS Youtube Embed Video Responsive

index.html

Example: HTML

<style>
.video-container {
  position: relative;
  padding-bottom: 56.25%;
}

.video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
</style>
<div class="video-container">
  <iframe
    src="https://www.youtube.com/embed/msizPweg3kE"
    frameborder="0"
    allow="accelerometer; autoplay; encrypted-media; gyroscope;"
    allowfullscreen></iframe>
</div>

Output should be:

How to create HTML CSS Youtube Embed Video Responsive

HTML Iframe Tutorial

Single Articles

Here is CSS Style to make iframe fits with Display	HTML Iframe Tutorial
Then, Use following HTML Code to view Youtube Video Embed	HTML Iframe Tutorial
Full Example of HTML CSS Youtube Embed Video Responsive	HTML Iframe Tutorial

Category:	Web Tutorial
Sub Category:	HTML Iframe Tutorial
Uploaded by:	Admin