I have an iFrame on my website for a vimeo video that I don't want to be full screen. It's taking up the entire size of the page at 1046 x 588.38 px.
I have tried adjusting the height and width in the embed code to no avail. If I change the percentages in CSS it will break or become too small and still not respond to the height or width values.
HTML is as follows:
<section class="vid">
<div class="responsive">
<iframe width="640" height="360" src="https://player.vimeo.com/" frameborder="0"
allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>
</section>
The possible offending css is as follows:
.responsive {
width: 100%;
height: 0;
padding-bottom: 56.25%;
position: relative; }
.responsive iframe {
display: block;
position: absolute;
width: 100%;
height: 100%; }
you don't need to use width and height in .responsive iframe,
you can set the width and height inside the iframe element
.responsive {
width: 100%;
height: 0;
padding-bottom: 56.25%;
position: relative; }
.responsive iframe {
display: block;
position: absolute;
/* width: 100%;
height: 100%; */
}
<section class="vid">
<div class="responsive">
<iframe width="640" height="200" src="https://player.vimeo.com/" frameborder="0"allow="autoplay"></iframe>
</div>
</section>
Related
I'm trying to replicate background-size: cover; with a Vimeo video in my website's hero section. I can get the video to sit nicely but it's not scaling down properly on small screens.
Here's what I've got at the moment:
HTML:
<div id="vimeohero">
<iframe src="https://player.vimeo.com/video/319007333?background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
CSS:
#vimeohero {
height: 300px;
}
iframe {
width: 100vw;
height: 56.25vw; // Given a 16:9 aspect ratio, 9/16*100 = 56.25
min-height: 100vh;
min-width: 177.77vh; // Given a 16:9 aspect ratio, 16/9*100 = 177.77
position: relative;
top: 50%;
left: 50%;
transform: perspective(1px) translate(-50%, -50%);
}
https://jsfiddle.net/a7j0rbmq/1/
When you look at this on a small screen (375px by 812px) the video is zoomed in and not displaying the same as background-size: cover; would.
(Obviously the video will have to zoom in a bit to fill the space but this zooms in more than necessary. If you change the height of your screen to match the height of the div (300px) it displays fine).
If you remove the min-width declaration it almost fixes the problem, however on some screen sizes you get whitespace either side of the video :(
You need to make a few changes on your css to achieve what you are looking for.
Edited: ajusted the height to 300px.
#vimeohero {
background: #eee;
height: 300px;
overflow: hidden;
padding: 0;
position: relative;
}
iframe {
box-sizing: border-box;
height: 56.25vw;
left: 50%;
min-height: 100%;
min-width: 100%;
transform: translate(-50%, -50%);
position: absolute;
top: 50%;
width: 177.77777778vh;
}
<div id="vimeohero">
<iframe src="https://player.vimeo.com/video/319007333?background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
The snippet dont show the video, see at codepen.
https://codepen.io/flavio-caruso/pen/WBKZqY
#vimeohero {
height: 100vh;
width: 100%;
overflow: hidden;
}
iframe {
width: 100vw;
height: 56.25vw;
min-height: 100vh;
min-width: 177.77vh;
}
*{
padding:0;
margin:0;
}
<div id="vimeohero">
<iframe src="https://player.vimeo.com/video/319007333?background=1" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
remove padding and margin on all element solve it!
This works great, until I have 2 or more iframes in the same container, then they just overlap each other because they both have the same absolute position.
How do I allow for an arbitrary number of iframes inside of a container built to house iframes and maintain their aspect ratios?
From: https://www.h3xed.com/web-development/how-to-make-a-responsive-100-width-youtube-iframe-embed
The key to creating a responsive YouTube embed is with padding and a container element, which allows you to give it a fixed aspect ratio. You can also use this technique with most other iframe-based embeds, such as slideshows.
Here is what a typical YouTube embed code looks like, with fixed width and height:
<iframe width="560" height="315" src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen></iframe>
It would be nice if we could just give it a 100% width, but it won't work as the height remains fixed. What you need to do is wrap it in a container like so (note the class names and removal of the width and height):
<div class="container">
<iframe src="//www.youtube.com/embed/yCOY82UdFrw"
frameborder="0" allowfullscreen class="video"></iframe>
</div>
And use the following CSS:
.container {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Don't put 2 videos in the same container. Put 2 containers and wrap them in a single wrapper. Then change the width and bottom-padding to whatever you want.
.container {
position: relative;
width: 50%;
height: 0;
padding-bottom: 28.13%;
display:inline-block;
margin:0;
}
.video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
<div class="wrapper">
<div class="container">
<iframe src="//www.youtube.com/embed/3Sdes6QuPro" frameborder="0" class="video"></iframe>
</div><div class="container">
<iframe src="//www.youtube.com/embed/yCOY82UdFrw" frameborder="0" class="video"></iframe>
</div>
</div>
I embed a vimeo video on my website like this:
<div class="fys-fp-content-wrapper">
<div id="fys-fp-video">
</div>
</div>
#fys-fp-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 600px;
}
#fys-fp-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 600px;
}
The Vimeo iFrame is loaded into #fys-fp-video.
However the Video in its original is only 640px width. I want to always display the video in a width of 100%, regardless whether something of the video is but of because of the 600px height, but it is important that it is shown full width.
Does somebody has a hint how I can achieve that?
thanks!
If you use bootstrap, it's easy :
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>
Source Bootstrap 4: https://getbootstrap.com/docs/4.0/utilities/embed/
Update Bootstrap 5:
https://getbootstrap.com/docs/5.0/helpers/ratio/#example
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<div class="embed-responsive embed-responsive-16by9">
<iframe lass="embed-responsive-item" src="https://player.vimeo.com/video/54596361" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>
</div>
I think what you are looking for is vw (viewport width). width:100% means 100% width of the parent. width:100vw means 100% of the screen. I suggest you do like this:
#fys-fp-video {
position: relative;
padding-bottom: 56.25%;
padding-top: 25px;
height: 600px;
}
#fys-fp-video iframe {
position: absolute;
top: 0;
left: 0;
width: 100vw;
height: 600px;
}
I have a div element containing a videoWrapper. What I want it to do is to be able to auto resize when I make the broswer's screen smaller. It works with the width because I could set a % to it. But I had to set a fixed value for the pixels.
So right now it auto adjusts the width but not the height, it stays always the same.
Here is the css style I am using for the div
height: auto;
height: 700px;
width: 70%;
border-style: solid;
border-color: red;
Something like this should work
<div class="videoWrapper">
<iframe width="560" height="349" src="" frameborder="0" allowfullscreen></iframe>
</div>
.videoWrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.videoWrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
I could not use the attribute height: 100%, it just did not work. I used the attribute height: 70vh, that solved my problem. Thanks anyway.
So I am using an iFrame in my website to display a video and I put it in a div to allow for resizing on mobile sties and just to make it more responsive etc. However now, if the monitor is small, the content below the iframe is cut off.
Here is the code for the iframe:
<div class="wrapper">
<iframe src="https://player.vimeo.com/video/132695239?badge=0" width="960" height="540" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
<style>
.wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
.wrapper iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
If anyone can see anything that may cause this behaviour then I would love to know.
Thanks
Edit:
Here is the code for the div that I am trying to scale. The width doesn't change as the page is scaled down and thus the height also does not change.
Any ideas?
<style>.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%; }</style><div class='embed-container'><iframe src='http://player.vimeo.com/video/66140585' frameborder='0' webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
The issue is that your wrapper div .splash-page .main-wrap is set to position: absolute; and overflow-y: hidden; this doesn't allow the div to grow to fit all your content.
If you change your CSS to include something like this:
.splash-page .main-wrap {
overflow-y: visible;
position: relative;
}
It will allow the div to grow to accommodate all your content.
You also could wrap the whole thing in a media query if you just wanted to target a specific width.
#media all and (min-width: 1001px) {
...
}
Currently you'll also have a duplicating background issue because your using .wsite-background on both a div and your body tag. If you remove this class from your body tag, it should look better.
Your iframe has a fixed with.
Try using width="100%" instead of width="960"