I've this html:
<div id="container">
<video id="video" src="video.ogv" loop></video>
</div>
Div "container" and video fills all screen
#container {
position: absolute;
top: 0px:
left: 0px;
height: 100%;
width: 100%;
}
#container video {
position: absolute;
top: 0px:
left: 0px;
height: 100%;
width: 100%;
}
The monitor where I'm testing is 1920x1080 while video is 1280x720: obviously I obtain two black border (top and bottom).
How can I view video without borders and without stretching it?
I've already search on so, like here, but is not my case.
Edit
I had forgotten min-width: and min-height proprerties, as HoangHieu suggest!
CSS become:
#container video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
}
you can use properties : min-width: and min-height:
Related
My css for Iframe:
position: absolute;
right: 0;
top: -100px;
z-index: 1;
height: 110%;
width: 100%;
border: none;
overflow-y: auto;
overflow-x: hidden;
This is my CSS for Iframe screen on my website, but in mobile devices, I have to scroll the Iframe screen to see the full website.
Note: making the iframe responsive is not in my hand.
The bootstrap method. Use an iframe or video element in it.
<div class="embed-16by9">
<iframe src="..."></iframe>
</div>
with responsive css
embed-16by9 {
position: relative;
display: block;
width: 100%;
padding: 0;
overflow: hidden;
}
.embed-16by9::before {
display: block;
content: "";
padding-top: 56.25%; /* ratio 16:9 */
}
.embed-16by9 iframe,
.embed-16by9 video {
width: 100%;
border: 0;
position: absolute;
top: 0; bottom: 0; left: 0;
height: 100%;
}
Please tell me how you can implement this possibility, depending on the width of the browser screen, the height of the video tag always kept 70%. Through css, I could not do it.
The video itself is on the full width of my screen. I would like to do this on js
<div class="video-cont">
<div class="overlay-video"></div>
<video src="https://globecore.com/wp-content/themes/globecore2016/video/usa-lp-video.mp4" type="mp4" autoplay="true" loop="loop"></video>
</div>
CSS
.video-cont {
overflow: hidden;
margin: -32px;
position: relative;
}
.overlay-video {
position: absolute;
top: 0px;
background: rgba(0, 0, 0, 0.6);
right: 0px;
height: 670px;
width: 100%;
z-index: 8;
}
Try to use this css code:
video {height: 70vw;}
You can set sizes like vw or vh which is the viewportWidth or viewportHeight
.video-cont {
overflow: hidden;
margin: -32px;
position: relative;
}
.overlay-video {
position: absolute;
top: 0px;
background: rgba(0, 0, 0, 0.6);
right: 0px;
height: 670px;
width: 100%;
z-index: 8;
}
.video-cont video {
height: 70vw;
}
<div class="video-cont">
<div class="overlay-video"></div>
<video src="https://globecore.com/wp-content/themes/globecore2016/video/usa-lp-video.mp4" type="mp4" autoplay="true" loop="loop"></video>
</div>
You can get the browser screen width in javascript by using window.screen.width or screen.width and then do the necessary calculations.
I am working on a site.Is it possible to make a div with a curved bottom by using html5 css3 and javascript. It's look like
Curved header bottom
.container {
width: 100%;
height: 400px;
background-color: lightgray;
position: relative;
overflow: hidden;
}
.inner {
position: absolute;
background-color: black;
top: -200px;
left: -50%;
height: 400px;
width: 200%;
border-radius: 50%;
}
<div class='container'>
<div class='inner'>
</div>
</div>
I am looking for a way to have a fixed width div centered in the display with divs to the left and right that re-size to fill the display. I am currently accomplishing this with a javascript window.resize function. The reason I want the divs to resize instead of just spill off screen is I actually want the images inside those divs to compress and expand. Is there a way I can accomplish this with just css?
Here is an example of my current markup:
HTML
<body>
<div id="wrapper">
<div id="center">
<div id="left"></div>
<div id="right"></div>
</div>
</div>
</body>
CSS
body {
margin: 0px;
min-width: 1024px;
font-size: 14px;
line-height: 20px;
}
#wrapper {
position: absolute;
top: 0px;
left: 0px;
height: auto;
min-width: 1024px;
width: 100%;
background: #7c7b79;
overflow: hidden;
}
#center {
position: relative;
width: 1000px;
height: auto;
margin: 0px auto;
}
#left {
position: absolute;
top: 0px;
left: -610px; //I do want slight overlap
width: 630px; //full width of image
height: 100%;
overflow: hidden;
}
#right{
position: absolute;
top: 0px;
right: -610px; //I do want slight overlap
width: 630px; //full width of image
height: 100%;
overflow: hidden;
}
javascript
$(window).resize(function(){
var browser_width = $(window).width();
if(browser_width >1100){ //below this width stop compressing
var width = ((browser_width - 1000)/2)+ 20;
$('.mid_pat2').css({'width': width, 'right': -(width-20), 'min-width': 30});
$('.mid_pat1').css({'width': width, 'left': -(width-20), 'min-width': 30});
}
});
You can do that with table-cell (IE8+), or flex (IE10).
Here's an example with table-cell.
HTML:
<div id="wrapper">
<div id="left">a</div>
<div id="center">a</div>
<div id="right">a</div>
</div>
CSS:
#wrapper {
display: table;
width: 100%;
}
#left, #center, #right
{
display: table-cell;
}
#center {
width: 400px; /*fixed*/
background-color: yellow;
}
#left {
background-color: red;
}
#right {
background-color: blue;
}
If the view port width is smaller then the fixed width, the table will not overflow, but instead the columns will shrink (and the fixed column will try to take as much space as possible)
I don't think this is not another "resize iframe according to content height" question.
I actually want to resize the iframe dynamically according to a resize of the parent window. For JS Fiddle fans I have an example here
For those who want to look at the code on SO:
<div id="content">
<iframe src="http://www.apple.com"
name="frame2"
id="frame2"
frameborder="0"
marginwidth="0"
marginheight="0"
scrolling="auto"
allowtransparency="false">
</iframe>
</div>
<div id="block"></div>
<div id="header"></div>
<div id="footer"></div>
CSS:
body {
margin: 0px;
padding-top: 78px;
padding-right: 0px;
padding-bottom: 25px;
padding-left: 0px;
min-height: 0px;
height: auto;
text-align: center;
background-color: lightblue;
overflow:hidden;
}
div#header {
top: 0px;
left: 0px;
width: 100%;
height: 85px;
min-width: 1000px;
overflow: hidden;
background-color: darkblue;
}
div#footer {
bottom: 0px;
left: 0px;
width: 100%;
height: 25px;
min-width: 1000px;
background-color: darkblue;
}
iframe#frame2 {
margin: 40px;
position: fixed;
top: 80px;
left: 0px;
width: 200px;
bottom: 25px;
min-width: 200px;
}
div#block {
background-color: lightgreen;
margin: 40px;
position: fixed;
top: 80px;
left: 350px;
width: 200px;
bottom: 25px;
min-width: 200px;
}
#media screen {
body > div#header {
position: fixed;
}
body > div#footer {
position: fixed;
}
}
There may be a bit of odd CSS there - I cobbled it together from the actual page. Apologies.
As you can see the green coloured div dynamically changes height accordingly when you resize the window. What I'd like to find out is if this can be done with the iframe to the left of the div.
Can CSS alone make this happen?
I created a new jsfiddle that gets you what you need in raw css. I didn't test cross-browser extensively, particularly in IE. I would anticipate support in IE8 and 9, but would be hesitant to say that 7 would work without hiccups.
The relevant changes:
/* This contains the iframe and sets a new stacking context */
div#content {
position: fixed;
top: 80px;
left: 40px;
bottom: 25px;
min-width: 200px;
background: black;
/* DEBUG: If the iframe doesn't cover the whole space,
it'll show through as black. */
}
/* Position the iframe inside the new stacking context
to take up the whole space */
div#content iframe {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
}
I think this does what you're after.
First I wrapped the iframe in a div, and set the iframe's width and height to be 100%.
HTML
<div id="frameContainer"><iframe src="http://www.apple.com" name="frame2" id="frame2" frameborder="0" marginwidth="0" marginheight="0" scrolling="auto" onload="" allowtransparency="false"></iframe></div>
CSS
#frameContainer {
margin: 40px;
position: fixed;
top: 80px;
left: 0px;
width: 200px;
bottom: 25px;
min-width: 200px;
}
iframe#frame2 { width: 100%; height:100% }
Then I added the following jQuery code.
jsFiddle
$(function() {
var widthRatio = $('#frameContainer').width() / $(window).width();
$(window).resize(function() {
$('#frameContainer').css({width: $(window).width() * widthRatio});
});
});
You can set the width and height of the iframe element to be percentage-based. Here's an example where width is 75% and will dynamically change when you increase/decrease the width of your browser window: http://jsfiddle.net/fallen888/pkjEB/
This worked for me:
div#content iframe {width: 100%}