Horje

Tips (Total 1)

1. How to create HTML CSS Youtube Embed Video Responsive

# Tips-1) 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


 

Horje