Responsive in every web materials is the trend of current web world. I mean , in the context of web development, responsive site can be called fashion but it also has many advantages. Mobile friendly, user friendly, device friendly and browser friendly are its some advantages. But in order to make a perfect responsive site, your site should have all elements responsive like videos, photos etc. Hence embedding video also should be device friendly, then your site can be called fully responsive.
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.
Now here I am just telling you to make an embedded video responsive. Lets see how we can make any embedded video responsive or device friendly. There is no much difficult to do this. You just follow the following steps.
How to Make Responsive Youtube Embed Video?
Step 01: In the beginning, you embed any video whose code can be like
<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.
Post a Comment