Horje
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:

Full Example of HTML CSS Youtube Embed Video Responsive





Related Articles
How to create HTML CSS Youtube Embed Video Responsive HTML Iframe Tutorial

Single Articles
Here is CSS Style to make iframe fits with DisplayHTML Iframe Tutorial
Then, Use following HTML Code to view Youtube Video EmbedHTML Iframe Tutorial
Full Example of HTML CSS Youtube Embed Video ResponsiveHTML Iframe Tutorial

Read Full:
HTML Iframe Tutorial
Category:
Web Tutorial
Sub Category:
HTML Iframe Tutorial
Uploaded:
1 year ago
Uploaded by:
Admin
Views:
63



Share on: