Menu
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 class="video-responsive">
<iframe width="420" height="315" src="https://www.vimeo.com" 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.
494
If you'd like your embedded video to autoplay or loop, go to the video's page on vimeo.com and click the "Share" button in the upper right corner of the video player. In the window that opens, click the "Show options" link, and check the corresponding boxes next to "Loop this video," "Autoplay this video," or both.
You can apply your new preset to an individual video by heading to its video page and clicking the "Settings" button below the player. On the "Embed" tab, select the desired preset from the dropdown below the preview of your embedded player, then hit the "Save" button.
Fixed Width & Responsive Settings If you choose responsive in the embed size settings, the Dacast video player will automatically adjust the embed size to fit your layout. You can also use a fixed width for embed videos, and the video player will automatically adjust the video height based on the aspect ratio.
This works for me. I used bootstrap
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
</head>
<body>
<div class="container">
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
</div>
</div>
</body>
</html>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='https://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
