The problem I have is that the video always gets black bars on the sides or on the top/bottom depending on the screen size.
Any idea how to get it full screen always without showing that annoying black bars? and without using a plugin.
This is my markup:
<div id="full-bg">
<div class="box iframe-box" width="1280" height="800">
<iframe src="http://player.vimeo.com/video/67794477?title=0&byline=0&portrait=0&color=0fb0d4" width="1280" height="720" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</div>
</div>
#full-bg{
width: 100%;
height: 100%;
img{
display: none;
}
.iframe-box{
width: 100%;
height: 100%;
position: absolute;
background: url(../img/fittobox.png);
left: 0 !important;
top: 0 !important;
iframe{
width: 100%;
height: 100%;
}
}
}
Try adding to your CSS
.iframe-box {
max-width: 1280px; /* video width */
max-height: 720px; /* video height */
}
This means that width: 100%; height: 100% will let the element will expand as much as it can, until it hits a maximum height or width of 720px or 1280px, respectively.
If the screen you're viewing it on has a greater resolution, the node will stop expanding and you'll not have black borders.
Further, afaik the following is not valid CSS, are you using a library or something?
#full-bg {
.iframe-box {
foo: bar;
}
}
Edit after answer accepted: I just thought of a completely different way to achieve this, but it would require you to change a lot of your CSS
.fittobox { /* give fit to box an aspect ratio */
display: inline-block; /* let it be styled thusly */
padding: 0; /* get rid of pre-styling */
margin: 0;
width: 100%; /* take up full width available */
padding-top: 56.25%; /* give aspect ratio of 16:9; "720 / 1280 = 0.5625" */
height: 0px; /* don't want it to expand beyond padding */
position: relative; /* allow for absolute positioning of child elements */
}
.fittobox > iframe {
position: absolute; /* expand to fill */
top: 0px;
left: 0px;
right: 0px;
bottom: 0px;
}
If you know the aspect ratio of your video, you shouldn't even need Javascript. You can use a percentage-based padding-top.
I could post code, but I'd recommend you read this entire article anyway.
#Paul S. 's answer works for me for the .fittobox container for 16:9 video aspect ratios but the .fittobox > iframe embed still has black bars with his CSS. Removing the right and bottom positioning fixes it for me (no need for "px" in those 0 values, of course):
.fittobox > iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
Related
What I am trying to do should be simple. But somehow I am not able to find an answer to it.
Here is my codepen:
https://codepen.io/mvsimple/pen/wvgbvgQ
HTML:
<div class="parent">
<iframe class="child" src="https://reesgargi.com/"></iframe>
</div>
CSS
.parent {
position: relative;
overflow: hidden;
width: 100%;
padding-top: 62.5%;
}
.child {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
I want the iframe to fit inside the div (so that its width = parent div width)
But iframe loads the page zoomed in, from the center.
I have tried using CSS (Flexbox, Table display, and W3S trick
But I am helpless. I tried the iframe resizer library but it had its own issues. (Dragging)
Please advise my fellow programmers.
Finally found a solution!
All I had to was to scale down the iFrame and set its width equal to the original size (source of that iframe).
.child{
width: 1280px;
/* Magic */
transform-origin: 0 0;
transform: scale(0.703);
}
My html pseudocode looks like that:
<div>
<VideoAnimation />
<div className="under-animation">
// a lot of content goes here
</div>
</div>
The thing is that VideoAnimation component has absolute positioning and takes height of 100vh (it must be that way). Because of this is taken out of the flow of document. Under-section should go just after the animation (so it mimics relative positioning behaviour) so I decided to give it absolute position as well - it begins at top: 100vh. But this causes something unexpected to me, ie. I cannot scroll thru the page anymore. I can take a right scroll bar and scroll it but cannot use it on my mousepad. Issue does not exist on relative positioning. Thanks!
My VideoSection component looks like that:
import React, {Component} from 'react';
render() {
return (
<div className="video__container">
<video autoPlay muted className="myVideo">
<source
src="https://res.cloudinary.com/da0fiq118/video/upload/c_scale,h_600/v1538825517/animation.mp4" type="video/mp4" />
</video>
</div>
);
}
}
export default VideoAnimation;
And scss file:
.video {
&__container {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
}
.myVideo {
display: block;
height: auto;
left: auto;
max-width: none;
min-height: 100%;
min-width: 100%;
right: auto;
position: absolute;
top: 0;
width: auto;
z-index: 1;
}
#supports (transform: translateX(-50%)) {
.myVideo {
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
}
#media screen and (min-aspect-ratio: 16/9){
.myVideo {
max-width: 100vw;
min-width: 100vw;
width: 100vw;
}
}
#media screen and (max-aspect-ratio: 16/9){
.myVideo {
height: 100vh;
max-height: 100vh;
min-height: 100vh;
}
}
The goal was to have animation in the center in every resolution with full viewport height, that's why I used absolute positioning and then manipulated its values.
Update:
With the new example code, I'm not seeing a reason you need to keep the video absolute, would 100vh and 100vw not suffice?
JSFiddle
Original post:
All of your content is absolute positioned, there is no content left in the normal document flow to give the body height to scroll.
Without knowing why the VideoAnimation element "must be" absolute, the easiest solution would be to not give the under-animation div position absolute and instead simply give it a top margin of 100vh. This keeps the element within the document flow and still compensates for the video's space.
To be clear, this is also a less than desirable setup that could run into issues if things change, but without more information it's the easiest one to give.
I wanted to have an Image on 100% width, with a max-height. When scaling the window and you're reaching the max-height, the width should still be at a 100% but "cropping" the image bigger (provided image size is fitting). This means you can see more of the image sides (left and right) when its on a big scale window, and you can see less on a small sized window. I'll post my css try down, but i don'thave a clue how to do that at this point. Hope you're getting my issue, i'll attach a visualisation.
My Code, don't get confused, I wanted to do a slider but lets focus on only one picture now, so sliders out of the game for now:
.slider-inner img {
display:none;
max-width: 100%;
height: auto;
}
#main-slider {
width: 80%;
min-width: 500px;
height: 450px;
min-height: 400px;
overflow: hidden;
margin: 0 auto;
}
.slider-inner{
width: 100%;
height: 450px;
margin: 0 auto;
position:relative;
overflow: hidden;
float:left;
padding: 0px;
}
What i want (visualisation):
If I understood you correctly you want your image to maintain its height and crop the width when window size is smaller.
Check this example:
div{
height: 300px;
position: relative;
overflow: hidden;
}
div img{
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
}
<div>
<img src="https://images.unsplash.com/photo-1536221236547-04007cfc3d8b?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=4d542ff4e10ff7de9d35d2ec8a467454&w=1000&q=80">
</div>
You do this with background image:
.box {
height:200px;
background:url(https://picsum.photos/1300/300?image=1069) center top/auto 100% no-repeat;
}
<div class="box">
</div>
Also you had "max-width:100%" and "height: auto" before. 100% is a relative unit, saying to take up 100% of the parent container's width, and auto was telling it to scale with the width while keeping aspect ratio.
I'm trying to embed a YouTube video and have found a few answers here on how to accomplish that however, when I embed the video I would like to add a custom height of 500px to the iframe. The idea is to maintain the aspect ratio but the iframe (visible area) of the video is smaller in height. I don't mind if the top and bottom is cut off (not fully visible) so long as the height is 500px and it remains full width with no black bars on the sides of the video.
This is what I have but don't know how to tweak the height without black bar appearing.
<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://www.youtube.com/embed/QILiHiTD3uc' frameborder='0' allowfullscreen></iframe></div>
You'd be able to tweak the height of the container by changing the padding-bottom value. But adding a fixed height will eventually show black bars at some point.
Like this?
.embed-container {
width: 500px;
height: 375px;
overflow: hidden;
position: relative;
}
.mask {
position: absolute;
width: 500px;
height: 50px;
background-color: red;
z-index: 1;
}
.top {
top: 0;
}
.bottom {
bottom: 0;
}
<div class='embed-container'>
<div class="mask top"></div>
<iframe width="500" height="375" src="https://www.youtube.com/embed/QILiHiTD3uc" frameborder="0" allowfullscreen></iframe>
<div class="mask bottom"></div>
</div>
I have a canvas in my page, and i want it to fill the page until it reaches the bottom of the page.
I have the canvas' width set to 100%, but i cannot set the height to 100% as it extends too far.
The position of the div is not 0,0 of the browser window there are other things above it, so i end up with a scroll bar because 100% height extends well below the bottom of my browser's output.
So i was wondering how can i extend the element's height to reach the bottom of the page from its current position on the web page?
<style>
.canvas{
position:absolute;
width:100%;
height:100%;
}
<style>
<div class="logo">Stuff here</div>
<div class="output">
<canvas class="canvas"></canvas>
</div>
Do i need to use JavaScript or is there a CSS method to doing this?
If you know the height of the content above the canvas, you can use top and bottom properties to take up the rest of the space:
JS Fiddle
.logo {
height: 40px;
}
.output {
position: absolute;
top: 40px; // height of above content
bottom: 0;
width: 100%;
padding: 0;
}
.canvas {
position: absolute;
width: 100%;
height: 100%;
padding: 0;
margin: 0;
}
And if you don't know the height of the above content, you can calculate it:
JQuery Example: JS Fiddle
var height = $('header').height();
$('.output').css('top', height);
this technique is also great when making resizable popups with fixed height headers and footers, but fluid height content
https://jsfiddle.net/ca5tda6e/
set the header (.logo) to a fixed height
.logo{
height: 100px;
background-color: lightGray;
position: relative;
z-index: 1;
}
then position the content (.output) absolute, with a padding-top: 100px
.output{
width: 100%;
height: 100%;
box-sizing: border-box; /* so that padding is included in width/height */
padding-top: 100px; /* padding-top should be equal to .logo height */
position: absolute;
top: 0;
left: 0;
overflow: hidden; /* there was like a pixel of something i couldnt get rid of, could have been white space */
}
I've had this problem before, in CSS, create this rule....
html, body {
margin: 0;
}