I did a lot of research over the internet, but this issue is not the exact same thing. I want to embed a video from vimeo using <iframe> tag. I've also tried this code:
.video-responsive{ overflow:hidden; padding-bottom:56.25%; position:relative; height:0; } .video-responsive iframe{ left:0; top:0; height:100%; width:100%; position:absolute; } <div> <iframe width="420" height="315" src="" frameborder="0" allowfullscreen></iframe> </div> But if you have a big screen, it also getting bigger, and that's not look great. I just want it to just shrink not greater than the provided width and height.
9 Answers
This works for me. I used bootstrap
<!DOCTYPE html> <html lang="en"> <head> <link rel="stylesheet" href="" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous"> </head> <body> <div> <div> <iframe src="" allowfullscreen></iframe> </div> </div> </body> </html>This is a trick from Bootstrap to create responsive elements that maintain their aspect ratio. In this example I'll use 16:9 as it's a video object, but I've used this to make circles, squares, and all sorts of shapes.
This technique uses a container and the ::before element.
HTML
<div> <iframe src="..."></iframe> </div> The ::before element deserves some attention because it's really what make this work. Changing the padding-top will change your aspect ratio, i.e. 16:9 = 9 / 16 = 56.25%
.video-responsive::before { display: block; content: ""; padding-top: 56.25%; } If you wanted to control the height, then you could just change the width of your .video-responsive container.
CSS
.video-responsive { position: relative; display: block; width: 300px; overflow: hidden; } .video-responsive::before { display: block; content: ""; padding-top: 56.25%; } .video-responsive-item { position: absolute; top: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } Try This, It will work with any type of media devices.
.embed-container { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; max-width: 100%; } .embed-container iframe, .embed-container object, .embed-container embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; }<div class='embed-container'> <iframe src=' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe> </div>@media screen and (min-width: 767px) { .video-responsive{ height: 360px; padding-bottom: 0; } } @media screen and (min-width: 320px) { .video-responsive{ height: 300px; padding-bottom: 0; } } remove this css add then try
1add css in media query for big size screen like
@media only screen and (min-width: 1600px) { .video-responsive { padding-bottom: 40%;// whatever you want - or - give height to this div } } What you are doing is correct if you want to have a responsive video that always keeps the aspect ratio of the video player.
To your point that it keeps growing up in big resolutions, you can fix this with:
Media query Add a media query for large screens so you can reduce the aspect ratio of the video as suggested in one of the previous answers
max-width The other is to add a max-width to your video container if you do care about the aspect ratio of the player.
.video-responsive{ overflow:hidden; padding-bottom:56.25%; position:relative; height:0; max-width: 800px; margin: 0 auto; } Hope that helps.
2I used the solution from this page for Vimeo, and it worked:
They also have same solutions for responsively embedding YouTube, Dailymotion, Google Maps, Getty Images, and more. You just adapt the css to your project, hopefully this site will keep this up to date for new versions.
.video-responsive{ overflow:hidden; padding-bottom:56.25%; position:relative; height:0; } .video-responsive iframe{ left:0; top:0; height:100%; width:100%; position:absolute; } @media screen and (min-width: 1600px) { .video-responsive{ height: 480px; padding-bottom: 0; } } @media screen and (min-width: 767px) { .video-responsive{ height: 360px; padding-bottom: 0; } } @media screen and (min-width: 320px) { .video-responsive{ height: 300px; padding-bottom: 0; } }<div> <iframe src="//" frameborder="0" allowfullscreen></iframe> </div>You have to give media query for it, Whatever max size you have decided just write media w.r.t decided max size. like I have written css media query for screen size which has the minimum width of 1200px
@media screen and (min-width: 1200px) { .video-responsive{ width: 1170px; } } I hope this will resolved your problem
