I have a video playing in the background of my top div. It looks fine when the screen is full size, but when I resize the browser window to see how it will look on smaller screens, the height of the div remains the same, leaving a big empty space between the background video and the next div.
Here is a preview of the site if you'd like to see for yourself, along with the specific code. https://codepen.io/CarlyWysocki/pen/YYaBOd
HTML:
<div class="jumbotron" id="top">
<video autoplay loop>
<source src="https://videos2.sendvid.com/03/25/up5p1yhu.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="container text-center">
<h1>Mac Demarco</h1>
<h4>Canadian singer-songwriter, multi-instrumentalist and producer.</h4>
<i class="fa fa-chevron-circle-down"></i>
</div>
</div>
CSS:
video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: auto;
}
.jumbotron {
padding-top: 30px;
padding-bottom: 30px;
margin-bottom: 30px;
color: inherit;
background-color: #eee;
height: 100%;
overflow: hidden;
position: relative;
}
.container {
position: relative;
}
If it just stays in the center, you can add css media queries resizing appropriately. One could also just use a picture for small screens via media queries.
Using the referenced stack overflow answer:
.video-container {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
.video-container video {
/* Make video to at least 100% wide and tall */
min-width: 100%;
min-height: 100%;
/* Setting width & height to auto prevents the browser from stretching or squishing the video */
width: auto;
height: auto;
/* Center the video */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
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.
Hi I have a background youtube video. I need it to be responsive. As I decrease the screen width it gets thinner, so that's good, but the height isn't altering correctly - it looks a bit like its shrinking down too fast.... You can see it here http://www.onscreencounselling.com/
What's wrong please
<?php if(is_page('homepage')){ ?>
<div id="video_background_video_0" style="z-index: 0; position: absolute; top: 0px; left: 0px; right: 0px; bottom: 0px; overflow: hidden;">
<iframe id="video_background_video_0_yt" style="position: absolute; top: -179px; left: 0px;" frameborder="0" allowfullscreen="1" title="YouTube video player" width="1349" height="759" src="https://www.youtube.com/embed/1CXFhQ33_xs?loop=0&start=0&autoplay=1&controls=1&showinfo=0&wmode=transparent&iv_load_policy=3&modestbranding=1&rel=0&enablejsapi=1&origin=http%3A%2F%2Fwww.onscreencounselling.com"></iframe></div>
<?php } ?>
And this css
#video_background_video_0 {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 25px;
height: 0;
}
iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Did you add this directly to the editor? This is a css fix.
.page iframe {
width: 560px !important;
height: 315px !important;
}
Remove inline styling from your iframe and it'll work: https://jsfiddle.net/ilpo/65sL59v8/
Remove the inline top value from iframe
FIDDLE
Remove Inline style from both and add
overflow-hidden;
to div and it will work.
I have responsive background and I want to have a YouTube video over that background(not in full width).
Here I have tried doing it.
http://jsfiddle.net/audetwebdesign/EGgaN/#run
HTML:
<div class="bg-image">
<img src="http://unplugged.ee/wp-content/uploads/2013/03/frank2.jpg">
<iframe width="560" height="315" src="//www.youtube.com/embed/R8wHnwfHscw" frameborder="0" allowfullscreen></iframe>
</div>
CSS:
.bg-image {
position: relative;
}
.bg-image img {
display: block;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
.bg-image iframe {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
Here's a jsfiddle forked from your fiddle that has the image as the background, as well as a responsive youtube video centered. Making the image have position:absolute takes it out of the normal flow and allows the embedded video to stay on top.
The trick for the responsive video code is to wrap the embedded video in a container with a max width, and then also adding in padding to keep the proper aspect ratio for the video. You then ensure that the iframe, object, and embded elements all fit at 100% of that container's width while also not getting any taller than the native size:
.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px;
height: 0;
overflow: hidden;
width: 100%;
max-width: 560px;
margin: 0 auto;
}
.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
max-height: 320px;
}
http://jsfiddle.net/QRkL9/
More about the above code - http://avexdesigns.com/responsive-youtube-embed/
braican is correct, but the 56.25% on the video container will leave lots of padding after your video. Just wrap everything inside another div with a max-height of 320px and overflow:hidden to hide the extra padding;
This should be easy, but I've spent a while trying to figure this out... I have a div that is 73px in height. I also have an Iframe that is suppose to stretch to the rest of the page but it overflows and I have two scroll bars (Iframe, and page). How can I have the div above the Iframe and have the Iframe in 100% height? I've also tried a negative margin and padding and that hasn't done anything.
Trying to get rid of the page scroll bar when using 100% and top: 73, but you can see the code for yourself.
I find this an interesting problem, so I've spent some time debugging the design on your page.
Now for me, the textarea always stretch exactly to the bottom of the page, not farther, and the page scrollbar does not appear.
Here are the modifications (I hope you did not change your code or stylesheets too much while I was debugging):
1.) - The "container" div:
Using bottom: 0 together with position: absolute ensures that the div stretch to the end of the page. Using height: 100% would cause the div to overflow! Using overflow: hidden does not allow the page scrollbar to show up.
<div class="container" style="position: absolute; top: 73px; bottom: 0; overflow: hidden; left: 50%; margin-left: -475px;">
2.) - The left pane ("span-12" div):
<div class="span-12" style="float: left; padding-top: 17px; width: 470px">
3.) - The right pane ("span-12 last" div):
You can use the same trick as with the "container"
div: absolute positioning and use of the top, right and bottom css properties.
<div class="span-12 last" id="friend_pane" style="position: absolute; top: 0; right: 0; bottom: 0">
4.) - And the iframe:
<iframe src="/friend/shell.php" frameBorder="0" allowTransparency="true" style="height: 100%; width: 100%">
EDIT - To make it center-aligned, I added "left: 50%; left-margin: -475px;" in the style of the "container" div. This tricks belongs to #clairesuzy, I didn't find it myself.
http://jsfiddle.net/HZTTp/:
<!doctype html>
<html>
<head>
<title></title>
<style>
html,
body {
margin: 0;
overflow: hidden;
}
body {
padding: 0 !important;
padding: 30px 0 0;
}
#top {
position: absolute;
top: 0;
left: 0;
height: 30px;
width: 100%;
overflow: hidden;
background: gray;
}
html
>
body
#bot {
position: absolute;
top: 30px;
bottom: 0;
width: 100%;
}
object {
width: 100%;
height: 100%;
}
</style>
</head>
<body>
<div id="top"></div>
<div id="bot">
<object data="foo"></object>
</div>
</body>
</html>
You can use a wrapper div on the iframe to specify where you want it's sides to be (top:73px; left:0; right:0; bottom:0;) with the help of position:absolute.
HTML:
<div id="head"></div>
<div id="main">
<iframe src="http://i.reddit.com/"></iframe>
</div>
CSS:
body { margin:0; padding:0; }
#head { height:73px; background:#c33; }
#main { top:73px; left:0; right:0; bottom:0; position:absolute; }
#main iframe { border:0; width:100%; height:100%; display:block; }
Demo: jsfiddle.net/fErZY
A bit tricky.. and most solutions work OK for the main part but IE7 doesn't like when a iframe is set to 100% tall without it's parent having an explicit height (in px, not percent) - so my solution is to absolutely position the container so you get the 73px top and 0 bottom co-ordinate you need - then it should be as simple as setting the #friend_pane div to 100% height, and then subsequently the iframe to 100%.. but that's the bit IE7 doesn't like.. so adding position: absolute; right: 0; also to the friend_pane div, along with the 100% height - then makes IE7 apply the 100% height to the iframe too.
There is leakage (small?), if that's what you've been referring to in your comments, that is to do with the iframes natural box model, but I found setting a negative bottom margin -4px on the iframe counteracts that
So with your code; remove all inline styles from .container #friend_pane and the iframe #friendpane_area
and add these styles:
.container {
position: absolute;
top: 73px;
bottom: 0;
left: 50%;
margin-left: -475px;
background: #cff; /* for testing only */
}
#friend_pane {
position: absolute;
right: 0;
height: 100%;
background: #fcf; /* for testing only */
}
#friend_pane iframe {
border: 0;
padding: 0;
margin: 0;
width: 470px;
height: 100%;
margin-bottom: -4px;
}
Here's a demo of this with your page code:
JSBin HERE
Note: overflow:hidden; on the #friend_pane div instead of the negative 4px margin on the iframe will also cure the "leakage"
and to keep some general code in the answer.. a simplified demo
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>FriendsConnect | My dashboard</title>
<style type="text/css" media="screen">
body {
background-color: #4DA2CA;
margin: 0px;
padding: 0px;
}
#mainbar {
background-image: url('http://friendsconnect.org/bar_fade.png');
background-repeat: repeat-x;
background-color: #494949;
padding-top: 6px;
height: 67px;
}
#infobox_left {
color: #444444;
margin-bottom: 15px;
padding: 15px;
background-image: url('http://friendsconnect.org/grp2.png');
background-color: #F2F2F2;
background-repeat: repeat-x;
float: left;
width: 440px;
}
#com-status {
border: solid 1px;
border-color: #3B7D99;
background-color: #4794B7;
padding: 15px;
float: left;
clear: left;
width: 440px;
}
.container {
position: absolute;
width: 950px;
top: 73px;
bottom: 0;
left: 50%;
margin-left: -475px;
background: #cff; /* for testing only */
}
#friend_pane {
position: absolute;
top: 0;
right: 0;
height: 100%;
background: #fcf; /* for testing only */
}
#friend_pane iframe {
border: 0;
padding: 0;
margin: 0;
width: 470px;
height: 100%;
margin-bottom: -4px;
}
</style>
</head>
<body>
<div align="left" id="mainbar">Main bar</div>
<div class="container">
<div style="padding-top: 17px;" class="span-12">
<div id="infobox_left">
<font color="#000000">Welcome TEST, what's up?<br/></font>
SOCIAL POINTS <font color="#000000">0 Points</font><br/>
ACCOUNT STATUS <font color="#2C8231">No Problems Found</font><br/>
CONNECTBOX <font color="#000000">0 New Messages</font>
</div>
<div id="com-status">
<strong>Pete Allport commented on your status</strong><br/>Pete Allport Commented: Yeah bro thats beastt...
<div style="float: right;"><button>Close</button></div>
</div>
</div>
<div id="friend_pane">
<iframe id="friendpane_area" src="http://google.com" frameborder="0" allowTransparency="true"></iframe>
</div>
</div>
</body>
</html>
which you can see:
JSBin Here
You can wrap your iframe in a div and set the div's position:fixed with top:73px then right, bottom, and left set to 0 so the div fills remaining space below your 73px header. Once your wrapper is set you can specify height and width to 100% for your iframe.
example: http://jsfiddle.net/pxfunc/KTwxb/
HTML:
<div id="header">Header</div>
<div id="wrapper">
<iframe id="frame" src="http://www.supercalifragilisticexpialidocious.com/"></iframe>
</div>
CSS:
html, body {margin:0;padding:0;height:100%;font-family:helvetica,arial,sans-serif;}
#header {width:100%;height:73px;}
#wrapper {position:fixed;top:73px;right:0;bottom:0;left:0;}
#frame {width:100%;height:100%;border:0;}
Here is an example. Only way I was able to hide the scroll bar was to set the iframe's html overflow property to hidden.
http://jsfiddle.net/nERqu/
HTML:
<div class="top">
<p>div text</p>
</div>
<iframe class="iframeBottom" src="http://www.google.com">
</iframe>
CSS:
.iframeBottom {
height: 100%;
width: 100%;
position: absolute;
scrolling: no;
}
.top {
height: 73px;
width: 100%;
background-color: yellow;
position: absolute;
z-index: 999;
}
It seems like iframe is being treated as an absolutely positioned element whether or not you actually specify that in the css. If its container is absolutely positioned, it should be able to fill the container using width:100% and height:100%.
In other words, if my theory is correct, the iframe isn't sizing "correctly" because it is searching for a positioned (i.e. relative, absolute, just not static) parent element. It needs to figure out how to adjust its size and the closest abs pos element is the browser viewing area itself. 100% height of the screen would normally fill the screen height, but the iframe is positioned down 73px, thus making it overflow by 73px.
Play with this a bit, it should be a nice step in the right direction:
<div style="position:absolute; width: 515px; top:73px; bottom:0px; right:0px;">
<iframe id="friendpane_area" style="position:absolute; width:100%; height: 100%;" src="./FriendsConnect My dashboard_files/shell.htm" frameborder="0" allowtransparency="true"></iframe>
</div>