At the top of my page is a header, and is pulled in from a different file/folder using php.
I would like to have the background video fully covered under my content body and under my header. But whenever I put it, then it is under my content only and the header is disappearing for some reason. Also, when I put it for header only, then I will get it at the top only and the body will be empty with my normal content but without the background video.
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
font-size: 17px;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
<video autoplay muted loop id="myVideo">
<source src="https://www.belloo.date/upgrade/themes/landing2/images/bg.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
I don't know if is that what you are trying to achieve, but you can try add a z-index negative and do some css ajusts.
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
font-size: 17px;
}
#myVideo {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
}
<video autoplay muted loop id="myVideo">
<source src="https://www.belloo.date/upgrade/themes/landing2/images/bg.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
<h1>Test</h1>
I do not know exactly what you mean, but maybe this will help you here.
I defined the header in css.
header {
position: fixed;
top:0px;
left: 0px;
right:0px;
min-width: 100%;
z-index: 1;
background-color: #fff;
padding: 10px;
}
and put the header tag
<header>My Header</header>
full html page
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial;
font-size: 17px;
}
header {
position: fixed;
top:0px;
left: 0px;
right:0px;
min-width: 100%;
z-index: 1;
background-color: #fff;
padding: 10px;
}
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
<html>
<head>
</head>
<body>
<header>My Header</header>
<video autoplay muted loop id="myVideo">
<source src="https://www.belloo.date/upgrade/themes/landing2/images/bg.mp4" type="video/mp4">
Your browser does not support HTML5 video.
</video>
</body>
</html>
Related
I am trying to display a full width video with an overlay text that sits centered on the video vertically and horizontally. The centered positioning should respond to changes in the viewport width such that it is always centered. Also I would like a "caption" (h2 tag in the example) to always display right below the video regardless to how the viewport is sized.
I have attached my sample code - any help appreciated.
Thanks
Dennis
<head>
<style>
.header-unit {
margin-top: 10px;
}
#video-container {
height:100%;
width:100%;
overflow: hidden;
position: relative;
}
#video-overlay {
position: absolute;
z-index: 1;
font-size: 50px;
color: red;
margin: 0;
transform: translate(-50%, -50%);
width: 85%;
text-align: center;
top: 25%;
left: 50%;
}
video {
position: absolute;
z-index: 0;
}
video.fillWidth {
width: 100%;
}
</style>
</head>
<div class="header-unit">
<div id="video-container">
<p id="video-overlay">Get A Quote!</a></p>
<video autoplay muted loop class="fillWidth">
<source src="https://www.w3schools.com/html/mov_bbb.mp4"/>
</video>
</div>
</div>
<h2>Test Caption</h2>
Please update your css with this and check:
html, body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
.header-unit {
margin-top: 10px;
height: 100%;
}
#video-container {
height:100%;
width:100%;
overflow: hidden;
position: relative;
}
#video-overlay {
position: absolute;
z-index: 1;
font-size: 50px;
color: red;
margin: 0;
transform: translate(-50%, -50%);
width: 85%;
text-align: center;
top: 50%;
left: 50%;
}
video {
position: absolute;
z-index: 0;
}
video.fillWidth {
width: 100%;
height: 100%;
object-fit: cover;
}
<div class="header-unit">
<div id="video-container">
<p id="video-overlay">Get A Quote!</a></p>
<video autoplay muted loop class="fillWidth">
<source src="https://www.w3schools.com/html/mov_bbb.mp4"/>
</video>
</div>
</div>
<h2>Test Caption</h2>
I have an angular 6 project, I am streaming a users web camera to a html element.
Essentially i am trying to replicate taking a video or photo on a users mobile. However the size of the video right now is small. I would like to fit it to the entire available height/width without distorting or stretching it if possible.
.component.html
<div fxFlexFill fxLayout="column" class="videoContainer">
<video #video autoplay></video>
</div>
<button class="lv-button gradient-theme" (click)="start()" [disabled]="started">Start</button>
.component.scss
video {
border: 1px solid black;
height: 80vh;
}
button {
padding: 12px 25px;
color: white;
font-size: 15px;
font-weight: 300;
width: 100%;
}
Its black right now because i covered the camera. But i would like it to display the full height of the container. Without stretching it, i have tried using object-fit: cover but this cuts out/zooms in.
use object-fit here. It will solve your problem.
.video {
width: 100vw;
height: 100vh;
position: fixed;
object-fit: cover;
}
Fullscreen Responsive Video
body {
margin: 0;
padding: 0;
/* Background fallback in case of IE8 & down, or in case video doens't load, such as with slower connections */
background: #333;
background-attachment: fixed;
background-size: cover;
}
/* The only rule that matters */
#video-background {
/* making the video fullscreen */
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
}
/* These just style the content */
article {
/* just a fancy border */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
border: 10px solid rgba(255, 255, 255, 0.5);
margin: 10px;
}
h1 {
position: absolute;
top: 60%;
width: 100%;
font-size: 36px;
letter-spacing: 3px;
color: #fff;
font-family: Oswald, sans-serif;
text-align: center;
}
h1 span {
font-family: sans-serif;
letter-spacing: 0;
font-weight: 300;
font-size: 16px;
line-height: 24px;
}
h1 span a {
color: #fff;
}
<link href='https://fonts.googleapis.com/css?family=Oswald' rel='stylesheet' type='text/css'>
<!-- Content -->
<article>
<h1>Responsive Video Background</h1>
</article>
<!-- Video is muted & autoplays, placed after major DOM elements for performance & has an image fallback -->
<video autoplay loop id="video-background" muted plays-inline>
<source src="https://player.vimeo.com/external/158148793.hd.mp4?s=8e8741dbee251d5c35a759718d4b0976fbf38b6f&profile_id=119&oauth2_token_id=57447761" type="video/mp4">
</video>
I have .mp4 as background of my site. The video is containing some non-moving elements. Let's say a square.
I want to place a div over this square and let it scale with the video if the window resizes.
I am testing, but the main problem is that the aspect ratio of the div is changing when resizing the window.
jsfiddle with example video:
https://jsfiddle.net/xhrub7so/6/
HTML
<div class="wrapper">
<div class="fullscreen-bg">
<video loop muted autoplay poster="img/videoframe.jpg" class="fullscreen-bg__video">
<source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4">
</video>
</div>
<div class="url_1">
test
</div>
</div>
CSS
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
z-index: -100;
}
.fullscreen-bg__video {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.url_1
{
position: absolute;
margin-top:20%;
margin-left:20%;
width: 50%;
height:30%;
background-color: #cccccc;
display:block;
}
.wrapper{
width:100%;
height:100%;
}
Thanks for the help.
New to coding.
I've set a video to autoplay on the background of a website.
When I try to place an image on top, I encounter issues, specifically when attempting to center it horizontally.
The typical solution results in the image disappearing:
img.center {
display: block;
margin: 0 auto;
}
Here is my CSS for the logo:
.logo {
position: absolute;
margin-left: auto;
margin-right: auto;
height: 250px;
padding-top: 15px;
}
I need this logo to float on top of the background video with it styled as such:
#bgvideo {
position: fixed;
top: 0;
left: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
It is simple as this. Here is a working codepen.
HTML:
<video autoplay muted loop id="myVideo">
<source src="https://www.w3schools.com/howto/rain.mp4" type="video/mp4">
</video>
<img id="myImg" src="https://www.searchenginegenie.com/images/29-samplelogo.jpg" width="200">
CSS:
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
#myImg {
position: absolute;
left: 0;
right: 0;
display: block;
margin: auto;
}
Hello I have a div with a <video> tag in it, and this is set as the background of the div. I have it working but when I go on to create a div below that, the video extends into that div. Basically the video extends beyond its parent container into other divs. It looks like it is taking the full height of the site instead of the full height of the div.
Here is my code:
.banner {
height: 903px;
width: 100%;
}
.banner video {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
background: url() no-repeat;
background-size: cover;
}
<div class="banner">
<video autoplay="" loop="">
<source src="//myvid.mp4" type="video/mp4">
<source src="//myvid.ogg" type="video/ogg">
</video>
</div>
Does anyone know why it is doing this?
Thanks!
change position:fixed to absolute and let the parent container be position:relative
check this snippet
.banner {
height: 200px;
width: 100%;
border: 1px solid green;
position: relative;
}
.banner video {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
background: url() no-repeat;
background-size: cover;
}
<div class="banner">
<video width="400" controls>
<source src="mov_bbb.mp4" type="video/mp4">
<source src="mov_bbb.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
</div>
<div>
whkjshfdksjhdfksdf
</div>
Hope it helps
You have position: fixed change that to absolute. Since fixed takes the current Display scope seperated from the parent elements. Thus scrolls and takes up everything since you used widht: 100%; height: 100%;
You might also add position: relative; to the banner class so the video has it as a parent.
In addition to changes to defaults, there are changes to position of .banner (relative) and the video (absolute), and the height of the video has been modified to a percentage that maintains a 16:9 aspect ratio. To demonstrate that it covers only it's container(.banner), .banner is set at half the lengths of viewport. Please review the Snippet in Full page mode.
SNIPPET
html,
body {
width: 100%;
height: 100%;
font: 400 16px/1.428 Verdana;
color: #eee;
overflow-x: hidden;
overflow-y: auto;
}
*,
*:before,
*:after {
box-sizing: border-box;
margin: 0;
padding: 0;
border: 0;
outline: none;
}
.banner {
position: relative;
height: 28vh;
width: 50vw;
}
.banner video {
position: absolute;
right: 0;
left: 0;
top: 0;
bottom: 0;
min-width: 100%;
min-height: 56.25%;
width: auto;
height: auto;
z-index: 0;
/*background: url() no-repeat;*/
background-size: cover;
}
<div class="banner">
<video id="vid1" class="vid" src="http://html5demos.com/assets/dizzy.mp4" controls>
</video>
</div>