|
|
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:
|
Category
: |
Web Tutorial |
|
Sub Category
: |
HTML Iframe Tutorial |
|
Uploaded by
: |
Admin |