I am trying to hide the overflow of an HTML5 video that is wrapped in a container. However there are still scroll bars in firefox and chrome. When I try to recreate the issue in Jsfiddle, it works fine (no scrollbars), but the same code in firefox or chrome creates a scroll and does not hide any overflow.
Any idea how I can get the overflow of an HTML5 video to hide, and why it's not working? PS. I have tried changing the position of the container to various things and have tried breaking overflow: hidden down to overflow-x and overflow-y
<div class="video_container">
<video autoplay loop controls muted="true"class="video_window">
<source src="http://www.html5videoplayer.net/videos/toystory.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
</div>
CSS
.video_container{
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: -100;
overflow:hidden
}
video{
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#media (min-aspect-ratio: 16/9) {
video {
height: 300%;
top: -100%;
}
}
#media (max-aspect-ratio: 16/9) {
video{
width: 300%;
left: -100%;
}
}
This one should do the trick if you meant those annoying bars with scroll element on your DIVs. Set this to your wrapper element (e.g. .video_container)
&::-webkit-scrollbar {
display: none;
}
Related
<div class="mission-statement">
<video style="min-height:100%" playsinline autoplay muted loop poster="{{ url_for('static',filename='images/cclc-background-image.png') }}" id="bgvid">
<source src="{{ url_for('static',filename='videos/cclc-clip2.mov') }}" type="video/webm">
</video>
</div>
#mission-statement {
margin-top: 0px;
margin-bottom: auto;
height: 100vh;
width: 100vw;
}
video#bgvid
{width: 100%; height: 100%; position: relative;}
Currently I have a video in the background of this div. However currently, when the screen is really wide, there is space on the left and right and when it is really narrow, there is space on the top and bottom.
Instead, I would like the video to zoom such that it is always touching all 4 sides. If the browser is narrow, it will be zoomed such that the left and right parts of the video are cut off. If the browser is really wide, it will be zoomed such that the top and bottom are cut off.
How can I accomplish this?
If you are only concerned with real modern browsers that conform to W3C standards (i.e. Not IE), use object-fit:cover. If IE is a must, there's a polyfill, but other than that, it would take too much effort and time to force a "browser" like IE to conform when it's obvious design is to conflict with everything that's sane and logical.
View in Full page mode
Demo
* {
margin: 0;
padding: 0;
border: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
width: 100%;
}
#mission-statement {
overflow: hidden;
position: fixed;
height: 100%;
width: 100%;
top: 0;
left: 0;
}
video#bgvid {
height: 100vh;
width: 100vw;
object-fit: cover;
overflow: hidden;
position: absolute;
bottom: 0;
right: 0;
}
<div class="mission-statement">
<video style="min-height:100%" playsinline autoplay muted loop poster="https://i.pinimg.com/originals/28/6c/00/286c004a0cc4a49a5e6985b0e0812923.gif" id="bgvid">
<source src="http://media6000.dropshots.com/photos/1381926/20170326/005609.mp4" type="video/mp4">
</video>
</div>
Try this:
video#bgvid {
/* 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%);
}
Background
I need to have an image larger than its container. The idea is to give the users the option to add full-width images to content pages, if they want to.
Problem
I used calc(100vw) with left: 50%; and translateX(-50%). This works perfectly in Chrome and Firefox. However, IE11 and Edge bring a horizontal scroll bar.
Code
HTML
<div>
<img />
</div>
CSS
div {
margin: 0 auto;
width: 400px;
}
img {
display: block;
left: 50%;
position: relative;
transform: translateX(-50%);
width: calc(100vw);
}
Fiddle
Here's an example so you can test and play: https://jsfiddle.net/Cthulhu/nbmy5mjf/1/
Question
How can I remove/hide the scroll bar from IE and Edge?
I thought this happened due to the way the image's position is being calculated. However, I noticed that Firefox and Chrome also show a scroll bar if I remove the display: block; from the image. Any ideas?
use
body {
overflow: hidden
}
or just:
body {
overflow-x: hidden
}
and drop the calc() it isn't doing anything there.
Snippet
body {
overflow: hidden
}
div {
border: 5px solid red;
margin: 0 auto;
width: 400px;
}
img {
display: block;
left: 50%;
position: relative;
transform: translateX(-50%);
width: 100vw;
overflow: hidden
}
<div>
<img src="http://randomrab.com/wp-content/uploads/2015/05/thumpimage.jpg" />
</div>
I am having an issue with the resizing of a full screen video, within a bootstrap template.
Here is the live example? http://velnikolic.com/toad/index.php# below 1400px and in safari browsers the video ratio gets very distorted.
<div class="fullscreen-bg">
<video loop muted autoplay poster="thumbnail.png" class="fullscreen-bg__video">
<source src="video.mp4" type="video/mp4">
</video>
</div>
/*Video*/
.fullscreen-bg {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
height: 600px;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 600px;
}
#media (min-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: 100%;
height: auto;
}
}
I think you should consider few Website optimization techniques. compress your thumbnails and other media content in order to load faster. it took me more than a minute for me to load your website.
One more thing i noticed, that is while resizing my browser window, when i switched to mobile view. the video block dissappears. which you can correct by using changing the following code
In your style.css line 450 -
#media (max-width: 767px)
.fullscreen-bg__video {
display: inline-block;
vertical-align:baseline;
}
/*your this css settings are fine*/
#media (min-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: 100%;
height: auto;
}
}
And I think you just updated the website and the video quality has degraded and when re-sized video is being paused. your last configuration was fine just u had kept width:600% somewhere in css.
I am looking to make my video background like this:
http://www.teektak.com/
The issue I'm having is that my video is responsive, but it is fixed to the left. I can't figure out for the life of me how to make it so that it centers horizontally to the window when adjusted.
Here is a link to the test site to see what I am talking about: https://robotplaytime.paperplane.io/
HTML
<body>
<video poster="images/robotPlaytimeVideo.png" id="bgvid" autoplay loop muted>
<source src="images/robotPlaytimeVideo.mp4" type="video/mp4">
</video>
</body>
CSS
html,
body {
height: 100%;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
min-width: 100%;
min-height: 100%;
z-index: -100;
background: url(../images/robotPlaytimeVideo.png) no-repeat;
background-size: cover;
}
Add these CSS rules to your body (the video's parent container):
text-align: center; /* ensures the image is always in the h-middle */
overflow: hidden; /* hide the cropped portion */
Add these CSS rules to your video:
display: inline-block;
position: relative; /* allows repositioning */
left: 100%; /* move the whole width of the image to the right */
margin-left: -200%; /* magic! */
Most of this was pulled directly from Bryce Hanscomb's answer to another similar question: How to center crop an image (<img>) in fluid width container
Here's a jsfiddle just in case:
http://jsfiddle.net/pLj0gcpu/
(Note that the markup and styles in this fiddle were pulled from your given URL)
To get the video to take the full size of the screen:
video {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
height: 100%;
width: 100%;
}
If you wanna center something horizontally responsively, then do
left: 50%;
transform: translateX(-50%);
Note, you will need to set a "position" as well
OK, this is a bit of a mouthful and very super specific. I will try my best to explain!
The goal is to maintain aspect ratio while scaling an image and keeping it vertically and horizontally centred inside a DIV that is defined only by percentages. The image needs to maintain best fit, so if max width is required then it's used and vice versa.
Use Firefox version 33 (or a few earlier versions) to view this js fiddle to see it working properly:
http://jsfiddle.net/3vr9v2fL/1/
HTML:
<div id="imageviewer" >
<div class="dummy"></div>
<div class="img-container centerer" id="imagevieweroriginal">
<img class="centered" src="http://chrisnuzzaco.com/couch/uploads/image/gallery/smiling_woman_wearing_drivers_cap.jpg" alt="Doctor Concentrating on Work"></img>
</div>
</div>
</div>
CSS:
#imagewrapper{
position:absolute;
width:69%;
height:100%;
top:0px;
bottom:0px;
background-color:gray;
}
#imageviewer{
position:relative;
width:100%;
height:100%;
}
.responsive-container {
position: relative;
width: 100%;
border: 1px solid black;
}
.dummy {
padding-top: 100%; /* forces 1:1 aspect ratio */
}
.img-container {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
.centerer {
text-align:center; /* Align center inline elements */
font: 0/0 a; /* Hide the characters like spaces */
}
.centerer:before {
content: ' ';
display: inline-block;
vertical-align: middle;
height: 100%;
}
.centered {
vertical-align: middle;
display: inline-block;
max-height: 100%;
max-width: 100%;
}
The Problem:
I originally found my code here on stackoverflow and made a simple mod adding max-height/width to the .centered class. At the time, this worked in all major browsers. The only exception being Opera.
Vertically align an image inside a div with responsive height
There is a big problem however: the latest version of Chrome (Version 38.0.2125.111) no longer works with this code and my users prefer chrome to other browsers by a large margin.
Any ideas on how to solve this? Is this a bug with Chrome? I'm open to javascript suggestions to make this work again.
I came up with this: JSFiddle - centered image keeps aspect ratio in resizable fluid container
.container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
}
.image {
position: absolute;
max-width: 100%;
max-height: 100%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
body {
width: 100%;
height: 100%;
position: absolute;
margin: 0;
}
<div class='container'>
<img class='image' src='http://imgsv.imaging.nikon.com/lineup/lens/zoom/normalzoom/af-s_dx_18-140mmf_35-56g_ed_vr/img/sample/sample1_l.jpg'>
</div>
The image stays centered both horizontally and vertically. If the window is scaled down the image shrinks respecting original aspect ratio.
I didn't test it on all browsers though.
Take a look at CSS object-fit property:
You may need a polyfill for older browsers, though.
View browser support for object-fit.