How can I get rid of this extra white space that iframes create? I am using a reference to a web app but, as far as I know, it should stretch to any 16:9 aspect ratio window. This isn't happening though. It seems this happens with other videos too, but the sides are often transparent. Is there a way I can do that here? Thanks
HTML:
<body background="images/Background.png">
<iframe id="primaryVideo" src="http://54.202.201.116/app/5/">
<p> Your browser does not support iframes. </p>
</iframe>
<button id="restart" left="1%">Start Over</button>
</body>
CSS:
#videoWrapper{
height: 100%;
}
#primaryVideo{
width: 80%;
height: 80%;
border: none;
position: absolute;
float: left;
display: inline;
}
div{
text-align:center;
}
I dug into the layout of that address and found the real location of the video. I applied the styles suggested from this old but still relevant article. It's 100% responsive. If you don't want it as big as the viewport, adjust the width of div.frame accordingly.
Demo 1 is the actual video in an iframe, Demo 2 is the site the has the video within the iframe. The player in Demo 2 looks like videoJS plugin so if you play the video through that, then the dimensions are up to the site which is still responsive. You can't see it functioning on SO because the site in question does not support https. Check it out at this Plunk.
Demo 1
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.frame {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
iframe {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
<div class='frame'>
<iframe src='https://s3-us-west-2.amazonaws.com/static.tapmedialabs/tap_media_intro_video_v8.mp4' width='100%' height='100%' allowfullscreen frameborder='0' scrolling='no'></iframe>
</div>
Demo 2 see Plunk for a functioning demo
html,
body {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.frame {
position: relative;
width: 100%;
height: 0;
padding-bottom: 56.25%;
}
iframe {
position: absolute;
top: 0;
left: 0;
overflow: hidden;
}
<div class='frame'>
<iframe src='https://54.202.201.116/app/5/' width='100%' height='100%' allowfullscreen frameborder='0' scrolling='no'></iframe>
</div>
Related
I'm trying to add a responsive layout with two iframes (Video(16:9) and Image(1:1)) side by side. Somehow I managed to search for a code that kind makes the layout responsive, the only problem that I'm facing right now is that I can't make the video to have the same height as the 2nd iframe has (image one), and at the same time to keep it's aspect ratio (16:9 since it's a youtube video).
What I have now (Demo w/ code): http://jsfiddle.net/dzw8jx4e/
HTML Code:
<div class="t_container">
<div class="ts_iframe">
<iframe frameborder="0" height="250" width="100%" src="https://www.youtube.com/embed/jNQXAC9IVRw"></iframe>
</div>
<div class="tc_iframe">
<iframe frameborder="0" height="250" width="250" src="https://cdn.shopify.com/s/files/1/0436/5985/3990/files/ezgif.com-video-to-gif.gif?v=1597626410"></iframe>
</div>
</div>
CSS Code:
.t_container{
display: inline-table;
width: 100%;
}
.ts_iframe{
display: table-cell;
width: 100%;
}
.tc_iframe{
width: 250px;
float:right;
}
#media (max-width: 768px) {
.t_container { display: block; }
.t_container .tc_iframe { display: block; width: 100%; float:none; }
}
An old way to keep aspect ratio is to use padding-top in percents, cause it will calculate it from available width. Here is an example:
body {
margin: 0;
}
.t_container::after {
clear: both;
}
.t_iframe {
position: relative;
float: left;
}
.t_iframe iframe {
width: 100%;
height: 100%;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
}
.t_video {
width: 64%;
padding-top: 36%;
}
.t_image {
width: 36%;
padding-top: 36%;
}
#media (max-width: 768px) {
.t_iframe {
float: none;
width: 100%;
}
.t_video {
width: 100%;
padding-top: 36%;
}
.t_image {
width: 100%;
padding-top: 100%;
}
}
<div class="t_container">
<div class="t_iframe t_video">
<iframe frameborder="0" src="https://www.youtube.com/embed/jNQXAC9IVRw"></iframe>
</div>
<div class="t_iframe t_image">
<iframe frameborder="0" scrolling="no" src="https://cdn.shopify.com/s/files/1/0436/5985/3990/files/ezgif.com-video-to-gif.gif?v=1597626410"></iframe>
</div>
</div>
Also on JSFiddle.
if not for complex custom table logic (or maybe even then, given some flexbox experience), i'd recommend the flexbox display style for this kind of work. It's very optimized for responsiveness and dealing with some rough html edges automatically.
https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox
You can gain a feeling for it with this game
https://flexboxfroggy.com/
Here is your code where i just removed any particular style related to table and kept only the display: block on the yt video to make them appear on different lines beyond the media query (note: this in flex is easier obtained by forcing flex-direction: column on the parent container)
http://jsfiddle.net/kctda2vr/1/
Cheers, let me know if something is missing.
Hey all you wizards of the interwebs,
I've been pulling my hair out for the past couple of days trying to figure this one out.
I'm trying to include a fullscreen video background and it seems I have hit a snag.
Below is an image of what I am trying to accomplish.
I tried it with the video element as well as an iframe. I can't get the div below to always nest under, when the browser window is resized.
Any help or pointers are greatly appreciated. Closest I've gotten was with a min-width/height but it still leaves a gap...
What I end up with is what shws in the 2nd img. The video resizes with the browser and there's a gap below it
To prevent the problem you need to do this:
css:
.div1{ background-color: red; height: 100%; position: relative; overflow: hidden;}
.div2{ background-color: black; height: 100%;}
video{ position: absolute; height: 100%; width: 100%; margin: 0; padding: 0; top: 0; bottom:0; right: 0; left: 0;}
and put your video inside div1:
<div class="div1">
<video autoplay>...</video>
</div>
<div class="div2">
</div>
It don't allow video element to show at overflow. and div1 is always height:100% and div2 is always height:100%.
If you like to fit the video to the div1 add
object-fit: cover;
to the video tag.
IE Doesn't Support object-fit
I'm not sure if this will work but
Have you tried removing width: 100% and only keeping height: 100% ?
I might be able to give better suggestions, if you can show the code :p
EDIT:
Since you want height to be screen height and width can be more or less, I'd say, try
min-height: 100%;
width: auto;
height: auto;
This should do the trick
NEW EDIT:
body{
overflow:hidden;
}
#wrapper {
width: 100%;
height: 100%;
}
.videoInsert {
min-height: 100%;
min-width: 100%;
height: auto;
width: auto;
position: absolute;
left: 0%;
top: 0%;
}
video{
display: inline-block;
vertical-align: baseline;
object-fit: fill;
}
As you all know iframe's are archaic but I wish to have a responsive one. Basically the video always needs to be 100% of the available screen height (which is actually 94.2% because of the banner at the top of every webpage of the site) even when changing window size. I was just wondering how to set the width so it is always 16:9 because at the moment the video displays as a strip:
<iframe src="https://www.youtube.com/embed/9bZkp7q19f0" frameborder="0" allowfullscreen></iframe>
<div id="video-overlay" onclick="hide()">
<h2>Video</h2>
</div>
<script>
function hide() {
document.getElementById("video-overlay").style.display = "none";
}
</script>
#iframe {
display: block;
border: none;
height: 94.2vh;
}
#video-overlay {
position: absolute;
top: 0;
left: 23.4%;
width: 53.3%;
height: 100%;
background-color: black;
opacity: 0.7;
}
#video-overlay h2 {
color: white;
position: absolute;
bottom: 2%;
left: 5%;
}
I'm wondering how I can tackle these problems I'm facing.
DemoJS Bin Demo
What I'm trying to achieve is this:
.display and it's content should adapt to the size of the screen. If the viewport width is too narrow (same with viewport height) – .display
should shrink and all enclosed items should keep their ratio.
.display and all content should be centered, vertically and horizontally.
Let vimeo items have the same aspect ratio as the images (vimeo embed forces 16x9 aspect ratio, but I'd like the height of the video
to be the same as the images and let vimeo add black bars to fill
out).
And on a side note, as I have absolute positioned divs above the actual content (.cursor .left and .cursor .right) controlling the vimeo video will prove to be somewhat problematic. Are there any other solutions out there that could potentially work the same way as these divs do but enable interaction with the content underneath?
Here's a site that have absolute dead center and that keeps ratio of the enclosed items when resized, this is exactly what I'm trying to achieve. I could not figure out how they made this happen other than JS is involved.
Bureau Collective
HTML
<div class="display">
<div class="cursor left"></div>
<div class="cursor right"></div>
<div class="work-carousel">
<div class="item"><img src="http://lorempixel.com/output/abstract-q-c-1080-675-7.jpg"></div>
<div class="item"><img src="http://lorempixel.com/output/nightlife-q-c-1080-675-9.jpg"></div>
<div class="item"><iframe src="http://player.vimeo.com/video/57840967?title=0&byline=0&portrait=0&color=000000" width="1080" height="608" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe></div>
</div>
</div>
CSS
.display {
position: relative;
width: 1080px;
}
.cursor.left {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 45%;
z-index: 999;
}
.cursor.right {
position: absolute;
top: 0;
right: 0;
height: 100%;
width: 45%;
z-index: 999;
}
.work-carousel {
margin:50px auto 60px;
padding:0;
}
.work-carousel item {
max-height: 100%;
max-width: 100%;
display: none;
}
.work-carousel item.first {
display: block
}
I thought I'd never use this technique!
The trick is in the padding:
.display {
position: relative;
width: 100%;
height:0;
padding:56.25% 0 0 0;
}
.item{
width: 100%;
height: 100%;
}
.item > * {
width: 100%;
height: 100%;
}
Here is the demo: http://jsbin.com/epeqar/7/edit
Here is an image slideshow.
My homepage will have such a slideshow. But the top row (sites, files, editor etc) will move to the bottom.
The slide show (with one large image at a time and a row of small images below) will stretch over the full page.
How can I make it stretch over the full page as i explained before?
Edit: Actually, what I want to know is how can I make an image (not a background image) stretch over the full page with a little space below?
CSS:
<style>
.big, .list {
position: fixed;
bottom: 100px;
left: 0;
width: 100%;
height: 100%;
}
.list {
bottom: 0;
height: 100px;
background: #000;
}
</style>
HTML:
<img src="http://goo.gl/8JnW8" class="big" alt="" />
<div class="list">{images}</div>
Let's say this is the HTML:
<body>
<img id="bgimg" src="image.jpg" alt="Image"/>
</body>
You can style it like this:
body {
position: relative;
width: 100%;
height: 100%;
}
#bgimg {
top: 0;
left: 0;
display: block;
position: absolute;
width: 100%;
height: 98%;
}
This should work.