I added youtube video in background but still it's not in full screen.
In left side and right side I'm still getting black background.
Here is my code:
<section class="banner-video">
<div class="banner-video-inner">
<iframe height="100%" width="100%" src="https://www.youtube.com/embed/<?php the_field('banner_video_link');?>?autoplay=1" frameborder="0" allowfullscreen></iframe>
</div>
</section>
.banner-video{position: relative; z-index: 0; width:100%; height:650px;}
.banner-video-inner{ position: absolute;top: 0;left: 0;width: 100%;height: 100%;pointer-events: none; z-index: 2;}
I used the_field using advance custom field plugin.
so can anyone tell me how to show video in full screen and remove that left and right side black background ??
Apply video to video tag and add CSS from below code:
body {
margin: 0;
background: #000;
}
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background-size: cover;
}
<video poster="https://s3-us-west-2.amazonaws.com/s.cdpn.io/4273/polina.jpg" id="bgvid" playsinline autoplay muted loop>
<source src="http://thenewcode.com/assets/videos/polina.webm" type="video/webm">
<source src="http://thenewcode.com/assets/videos/polina.mp4" type="video/mp4">
</video>
.banner-video{position: relative; z-index: 0; width:100%; height:759px;}
#media only screen and (min-width:1400px){
.banner-video{height:843px;}
}
#media only screen and (min-width:1520px){
.banner-video{height:948px;}
}
#media only screen and (max-width:1199px){
.banner-video {height:576px;}
}
#media only screen and (max-width: 992px){
.banner-video {height:432px;}
}
#media only screen and (max-width: 640px){
.banner-video {height:318px;}
}
#media only screen and (max-width: 400px){
.banner-video {height: 180px;}
}
Finally This Works for me. Got the video in full screen.
Related
Im having trouble getting rid of what it appears to be a margin error?...i've already tried setting margin and padding values as 0 but i keep getting that line, should i downsize the video or something?
I inserted the background video on a div tag. Is the video just out of place?
/* Default to hide the video on all devices */
#video{display:none}
/* Default to display the image on all devices */
#videosubstitute{display:block;width:auto;height:100%;}
html, body {
height: 100%;
margin: 0;
}
/*START VIDEO
==================================================*/
#fullScreenDiv{
width:100vh;
min-height: 100vh;
/* Set the height to match that of the viewport. */
height: 100vh;
width: auto;
padding:0!important;
margin: 0!important;
background-color: black;
position: relative;
}
#video{
width: 100vw;
height: auto;
object-fit: cover;
left: 0px;
top: 0px;
z-index: 1;
volume: .02;
}
#media (min-aspect-ratio: 16/9) {
#video{
height: 150%;
top: -100%;
}
#videosubstitute{
display:block;
width: 100%;
height: auto;}
}
#media (max-aspect-ratio: 16/9) {
#video {
width: 150%;
left: -100%;
}
#videosubstitute{display:block;width:auto;height:100%;}
}
/*if there is 992 pixels or more, then display the video but hide the image*/
#media only screen and (min-width : 992px) {
#video{display:block;}
#videosubstitute{display:none}
}
/* The container for our text and stuff */
#messageBox{
position: absolute; top: 0; left: 0;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height:100%;
}
/*END VIDEO
==================================================*/
<div id="fullScreenDiv" class="table-cell">
<img src="https://www.imi21.com/wp-content/uploads/2016/11/t12.jpg" id="videosubstitute" alt="Full screen background video"></img>
<div id="videoDiv">
<video preload="preload" id="video" autoplay="autoplay" loop="loop">
<!-- Note: Replacing the following sources that are local:
<source src="img/mc10.webm" type="video/webm"></source>
<source src="img/mc10.mp4" type="video/mp4"></source> -->
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4"></source>
</video>
</div>
</div>
This line seems off:
width:100vh;
vh means percent of the screen height. Probably a bad idea to use that as width.
Are you really sure you want the video to be cut off at the sides of the screen? Wouldn't it be better to have a black background and let the video fill the available space without stretching? E.g. fill: contain
Here's what's happening. I dont want my video to be full width. I want it a specific width. When I change the width the container sends the video to the left side. Then when I put in the middle it appears to be fine....until you zoom in and out and the div/container/wrapper moves the video.
How can I solve this?
How do I keep my video div/container/wrapper from moving when I zoom in and out?
The video is directly under the navigation bar so I'm sure it has something to do with the header's div/wrapper width. Please help.
HTML
-->
<div class="video-background" id="video-background">
<video loop="loop" autoplay poster="{{ 'home-placeholder.jpg' | asset_url }}" width="100%">
<source src="{{ 'home.mp4' | asset_url }}" type="video/mp4">
<source src="{{ 'home.webm' | asset_url }}" type="video/webm">
<source src="{{ 'home.ogg' | asset_url }}" type="video/ogg">
<img alt="" src="{{ 'home-placeholder.jpg' | asset_url }}" width="640" height="360" title="No video playback capabilities, please download the video below">
</video>
Scroll Down
</div>
And CSS
div.video-background {
height: 100%;
left: 0;
overflow: hidden;
/*position: fixed;
top: 96px;*/
vertical-align: top;
width: 100%;
/*z-index: -1; */
margin-top:96px;
position:relative;
}
div.video-background video {
min-height: 100%;
min-width: 100%;
z-index: -2 !important;
}
div.video-background > div {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
z-index: 10;
}
div.video-background .circle-overlay {
left: 50%;
margin-left: -590px;
position: absolute;
top: 120px;
}
div.video-background .ui-video-background {
display: none !important;
}
.index .sub-footer {
margin-top:0px;
}
I finally found an answer to this or a fix.
I tried three different things.
Setting different px values at different screen intervals
#media screen and (max-width: 1180px){
div.video-background video {
width:1000px;
}
}
#media screen and (max-width: 801px){
div.video-background video {
width:700px;
}
}
Also tried
width:auto;
Didn't do the trick.
I then tried em
#media screen and (max-width: 75em){
div.video-background video {
width:50em;
}
}
#media screen and (max-width: 65em){
div.video-background video {
width:30em;
}
}
Worked better but didn't solve it.
I finally tried vh setting width and height as vh
#media screen and (max-width: 1180px){
div.video-background video {
width:60vh;
height:60vh;
}
}
#media screen and (max-width: 801px){
div.video-background video {
width:40vh;
height:40vh;
}
}
And that fixed the issue. Please take these values with a grain of salt as they do not really represent the actual numbers I used. But hopefully this helps you in the future when dealing with browser zoom, overlapping elements, and moving divs.
I'm using the videojs.com video player and it works great the only problem is that I want the video player to be the full-screen size instead of using pixels like for example if you are on a smaller screen the video player looks messed up.
I tried to use 100% instead of px but it also messed up a lot.
Is there some other way I can make it fit the whole screen automatically?
<video id="player" class="video-js vjs-default-skin" controls autplay="true" preload="auto" width="1880px" height="980px"
poster="FF7.png"
data-setup="{}">
<source src="FF7.mp4" type='video/mp4' />
<track kind="subtitles" src="FF7.vtt" srclang="en" label="Svenska"></track>
</video>
Check the Codepen here
video {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: url('//demosthenes.info/assets/images/polina.jpg') no-repeat;
background-size: cover;
transition: 1s opacity;
}
You can use a parent div container for your video, so it acts like a cross browser anchor for your video. Also you can use the media query min-aspect-ratio and max-aspect-ratio.
Codepen example with editor:
http://codepen.io/jonathan/pen/bEbdmz/?editors=110
Codepen example in fullscreen mode:
http://codepen.io/jonathan/full/bEbdmz/
The HTML
<div id="video-wrapper">
<video id="player" class="video-js vjs-default-skin" controls autplay="true" preload="auto" width="1880px" height="980px" poster="FF7.png" data-setup="{}">
<source src="FF7.mp4" type='video/mp4' />
<track kind="subtitles" src="FF7.vtt" srclang="en" label="Svenska"></track>
</video>
</div>
The CSS:
html, body {
height:100%;
}
body {
margin:0;
padding:0;
}
#video-wrapper {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
}
#video-wrapper > #player {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
cursor:pointer;
}
#media (min-aspect-ratio: 16/9) {
#video-wrapper > #player {
height: 300%;
top: -100%;
}
}
#media (max-aspect-ratio: 16/9) {
#video-wrapper > #player {
width: 300%;
left: -100%;
}
}
And if you want a JavaScript fullscreen solution you could use some of the following:
http://vodkabears.github.io/vide/
http://dfcb.github.com/BigVideo.js/
http://syddev.com/jquery.videoBG/
I'm trying to create a website in which the background is a video. I've been searching for days on how to recreate something like Spotify's homepage background but cannot seem to make it work.
My problem is that I can either get the height to scale with the browser, or the width, but not both. Unlike the video on Spotify's website, it doesn't scale to fit the browser at all times. I've tried many things, and most of them I can't remember. I don't mind using JQuery to achieve this effect.
My current code is:
<!DOCTYPE html>
<html>
<head>
<title>VideoBG</title>
<style type="text/css">
#videohome {
position:absolute;
height: 100%;
width: 100%;
top:0;
left:0;
right:0;
bottom:0;
}
</style>
</head>
<body>
<video id="videohome" preload="auto" autoplay="true" loop="loop" muted="" volume="0">
<source src="./homepage.mp4" type="video/mp4" />
</video>
</body>
</html>
You will need to have a container div, which fits to the screen, and then add a class to the video which will resize it to width or height.
CSS:
.container {
width: 100%;
height: 100%;
position: absolute;
padding:0;
margin:0;
left: 0px;
top: 0px;
z-index: -1000;
overflow:hidden;
}
.videoPlayer {
min-height: 100%;
//min-width:100%; - if fit to width
position:absolute;
bottom:0;
left:0;
}
HTML:
<div class="container"><video class="videoPlayer">Code goes here</video></div>
Use object-fit: cover in the container
Oldie but a goldie. Have been struggling with this myself but found that aspect-ratio media queries do the job nicely.
If media queries aren't supported, the video will still cover the page but won't scale properly.
If translateX, translateY or #supports isn't supported, the video won't be centered.
HTML:
<div class="cover">
<video autoplay loop mute poster="path/to/image.jpg">
<source src="path/to/video.mp4" type="video/mp4" />
<source src="path/to/video.webm" type="video/webm" />
<source src="path/to/video.ogv" type="video/ogg" />
<img src="path/to/image.jpg" alt="" />
</video>
</div>
CSS:
.cover {
bottom: 0;
left: 0;
overflow: hidden;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
.cover img, .cover video {
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%)) {
.cover img, .cover video {
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
}
#media screen and (min-aspect-ratio: 16/9){/* Make this the same aspect ratio as your video */
.cover img, .cover video {
max-width: 100vw;
min-width: 100vw;
width: 100vw;
}
}
#media screen and (max-aspect-ratio: 16/9){/* Make this the same aspect ratio as your video */
.cover img, .cover video {
height: 100vh;
max-height: 100vh;
min-height: 100vh;
}
}
I found this:
http://wesbos.com/css-object-fit/
Use object-fit: cover; on your video tag
It worked for me.
I've got a landing page with a fullscreen width & height video background. Everything works fine. However, when I try to hide the video on mobile resolution using media queries, it doesn't hide at all.
I've tried enclosing the video in a div, and setting that div to display none. Didn't work either.
Does anyone have any idea how I could hide a background video for mobile devices?
Here's the main code.
HTML:
<div id="video_bg">
<video id="video_background" autoplay loop>
<source src="backgroundmovie.webm" type="video/webm" />
<source src="backgroundmovie.mp4" type="video/mp4" />
</video>
</div>
CSS:
#video_background {
position: absolute;
bottom: 0px;
right: 0px;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1000;
overflow: hidden;
}
#media only screen and (max-width: 960px) {
#video_bg { display:none; }
#video_background { display:none; }
}
You can try #media only screen and (max-width: 960px) {#video_bg:display:none !important;} just to check weather it works or not.
EDIT
Or you can inherit the above tags and then do a display:none; like below.
#media only screen and (max-width: 960px) {
div#video_bg video#video_background source {display:none;}
}
Hope this helps.