Responsive Video in Site and Blog
How to Make Responsive Youtube Embed Video?
<iframe width="560" height="315" src="https://www.youtube.com/embed/o2Tw-8rF8dI" frameborder="0" allowfullscreen></iframe>Step 02: Now add this code <div class="embed-video"> in the above code. Now code becomes like
<div class="embed-video">Step 03: After adding a div, now just add the below code any where in the stylsheet
<iframe width="560" height="315" src="https://www.youtube.com/embed/o2Tw-8rF8dI" frameborder="0" allowfullscreen></iframe>
</div>
<style type="text/css">
.embed-video {
position: relative;
padding-bottom: 75%; // This is the aspect ratio
height: 0;
overflow: hidden;
}
.embed-video embed,embed-video object,embed-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100% !important;
height: 100% !important;
}
</style>
Note: When you go to add any embed video, you will do the same as step 01 and step 03 only. You do not need to repeat step 03. Thank you friends. Any problem, just comment.