I need to have some text centered within this video. I got rid of the container for the header, and the desired results are still in tact, so that works with me, but I've struggled to deal with centering this text!
<div class="video-container">
<video class="video" preload="true" autoplay = "autoplay" loop = "loop">
<source src="nyc.mp4" type="video/mp4"/>
</video>
<p class="center-block quote"> Test </p>
Styling:
.video-container {
position:absolute;
top: 0%;
left: 0%; /*centers the video */
height: 100%;
width: 100%;
overflow: hidden;
}
video {
margin-top:50px; /* gap b/w navbar and header */
position:absolute;
z-index: -1;
opacity: 0.78;
width: 100%;
margin: none;
padding: none;
}
Bootstrap has a built in helper class - .text-center
Try this: <div class="video-container text-center">
here a print screen
worked print screen
<!DOCTYPE html>
<html>
<body>
<style>
.center-block{text-align: center;}
.video-container {
position:absolute;
top: 0%;
left: 0%; /*centers the video */
height: 100%;
width: 100%;
overflow: hidden;
}
video {
margin-top:50px; /* gap b/w navbar and header */
position:absolute;
z-index: -1;
opacity: 0.78;
width: 100%;
margin: none;
padding: none;
}
</style>
<div class="video-container">
<video class="video" preload="true" autoplay = "autoplay" loop = "loop">
<source src="nyc.mp4" type="video/mp4"/>
</video>
<p class="center-block quote"> Test </p>
</div>
</body>
</html>
Use this
<p class="center-block quote" style="text-align:center;"> Test </p>
And also paste this one:
.video-container {
position:relative;
top: 0%;
left: 0%; /*centers the video */
height: 100%;
width: 100%;
overflow: hidden;
}
.video-container video{
position: fixed;
top: 100%;
left: 100%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translate(-100%, -100%);
}
.video-container{
justify-content: centre;
width: 100%;
height: 100%;
text-align: centre;
}
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'm creating a website and I set a video for the website background.
The problem now is that when I try to insert the logo at the top of the website but the video blocks the image.
Image of my CSS
Current View of my Website
* { margin: 0; padding: 0; } .video-background{ position: absolute; right: 0; bottom: 0; min-width: 100%; min-height: 100%; width : auto; height: auto; z-index: -100; } media (min-aspect-ratio: 16/9){ .video-background{ width: 100%; height: auto; } } media (max-aspect-ratio: 16/9){ .video-background{ width: auto; height: 100%; } } .navigation{ margin: 10px 50px; height: 60px; }
<!DOCTYPE html>
<html>
<head>
<title>CSC1026: Tutorial Website</title>
<link href="CSS/style.css" rel="stylesheet" type="text/css">
</head>
<body>
<header>
<video autoplay loop class="video-background" muted plays-inline>
<source src="Workaholic.mp4" type="video/mp4">
</video>
<div class= "navigation">
<img src= "logo.png" class = "logo">
</div>
</header>
</body>
</html>
<header> needs position: relative and background: none
<video> and <img> need position: absolute and display: block
<img> needs background: none and z-index:(at least 1 greater than <video> z-index if any).
If you think you really need .navigation (you probably don't) -- add the same properties of <img> to it and adjust accordingly.
main {
position: relative;
top: 30vh;
left: 0;
width: 99vw;
height: auto;
}
header {
position: relative;
background: none;
width: 99vw;
height: auto;
}
img {
display: block;
position: absolute;
right: 0;
top: 0;
z-index: 1;
width: 15vw;
height: 30vh;
background: none;
}
video {
display: block;
position: absolute;
top: 0;
left: 0;
z-index: 0;
width: 100%;
}
<header>
<img src="https://branditprintit.com/wp-content/uploads/2017/04/logo-degin-logo-design-design-art-free.png">
</header>
<main>
<video src='https://storage04.dropshots.com/photos6000/photos/1381926/20170326/005610.mp4' muted plays-inline autoplay loop></video>
</main>
I try to put a video on my website. It should always cover the whole screen. Its no problem if the video gets cut on the sides or the bottom. The most important part of the video is in the top middle.
I've already found a code that works pretty well if you want that the video's center is always visible. But I want the top (and middle) to be visible.
Here is my current code.
.vidwrap {
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
overflow: hidden;
}
video {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
min-height: 50%;
min-width: 50%;
height: auto;
width: auto;
display: block;
}
<div class="vidwrap">
<video autobuffer="" autoplay="">
<source src="video/background-video.mp4" type="video/mp4">
</video>
</div>
And in this code the top stays visible but its not aligned in the center anymore:
.vidwrap {
position: absolute;
top: 0;
right: 0;
width: 100%;
height: 100%;
overflow: hidden;
background-color: blue;
}
video {
position: relative;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: 0 auto;
min-width: 100vw;
min-height: 100vh;
overflow: hidden;
<div class="vidwrap">
<video autobuffer="" autoplay="">
<source src="video/background-video.mp4" type="video/mp4">
</video>
</div>
I am not able to bring these codes together. Can you help me?
Try this:
.vidwrap {
position: relative;
width: 100vw;
height: 100vh;
overflow: hidden;
background-color: #00f;
}
video {
min-height: 100%;
min-width: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,-0);
}
<div class="vidwrap">
<video autobuffer="" autoplay="">
<source src="https://www.rmp-streaming.com/media/bbb-360p.mp4" type="video/mp4">
</video>
</div>
For everyone who is looking for the answer. My code seems to work perfectly now (at least it does what I want it to do :D)
This is my code now after nidhi's help
.vidwrap {
position: absolute;
width: 100%;
height: 100%;
overflow: hidden;
}
video {
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
position: absolute;
top: 0;
left: 50%;
transform: translate(-50%,-0);
}
<div class="vidwrap">
<video autobuffer="" autoplay="">
<source src="video/background-video.mp4" type="video/mp4">
</video>
</div>
Thank you!
I am trying to make a background video with the fixed height of 700px without affecting the aspect ratio. video can crop. My issue is that the full height of the video is showing even I have provided a height of 700 px. Here is the code:
<div class="video-container">
<div class="video-overlay-text">
<h1>Some heading</h1>
<p>Sentence</p>
</div>
<video autoplay loop muted id="video-bg">
<source src="homepage-video-mp4_1.mp4" type="video/mp4" />
</video>
</div>
here is the CSS:
#video-bg {
position: relative;
width: auto;
min-width: 100%;
height: auto;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
}
video {
display: block;
position: absolute;
}
.video-container {
width: 100%;
height: 600px;
overflow: hidden;
position: relative;
top: 0;
right: 0;
z-index: 0;
}
.video-overlay-text {
position: absolute;
z-index: 5;
overflow: auto;
bottom: 20%;
left: 4%;
max-width: 700px;
margin: auto;
display: block;
}
.video-overlay-text h1 {
color: #ffffff;
font-size:34px;
line-height: 36px;
}
.video-overlay-text p {
color: #ffffff;
}
I have tried everything. Sometimes the mobile view gets cut and the text moves way up.
I have added max-height which will be helpful for all screen sizes. Also added a demo text to show the limit of the video. Hope this helps.
#video-bg {
position: relative;
width: auto;
min-width: 100%;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
}
video {
display: block;
position: absolute;
}
.video-container {
width: 100%;
max-height: 600px;
overflow: hidden;
position: relative;
top: 0;
right: 0;
z-index: 0;
}
.video-overlay-text {
position: absolute;
z-index: 5;
overflow: auto;
bottom: 20%;
left: 4%;
max-width: 700px;
margin: auto;
display: block;
}
.video-overlay-text h1 {
color: #ffffff;
font-size: 34px;
line-height: 36px;
}
.video-overlay-text p {
color: #ffffff;
}
<div class="video-container">
<div class="video-overlay-text">
<h1>Some heading</h1>
<p>Sentence</p>
</div>
<video autoplay loop muted id="video-bg">
<source src="//ak3.picdn.net/shutterstock/videos/2743133/preview/stock-footage-shanghai-china-circa-july-timelapse-video-of-shanghai-china-skyline-at-sunset-circa-july.mp4" type="video/mp4" />
</video>
</div>
<h2>Hello</h2>
I want to create a responsive background video, but don't know how to change the alignment.
As far as I can see, the alignment currently is bottom right, but I want to change it to center center. (like background-position: center center)
Is there any way to achieve this?
Fiddle: http://jsfiddle.net/66dLhjxh/
HTML:
<video autoplay loop poster="http://demosthenes.info/assets/images/polina.jpg" id="bgvid">
<source src="http://demosthenes.info/assets/videos/polina.webm" type="video/webm">
<source src="http://demosthenes.info/assets/videos/polina.mp4" type="video/mp4">
</video>
CSS:
video {
position: fixed;
display:block;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-color:#fff;
background:url(../img/schrijven.jpg) no-repeat;
background-size: cover;
background-position: center center;
}
try this code DEMO
<div id="info">
Responsive Youtube embed......
</div>
<div class="holder">
<div class="video-container">
</div>
</div>
<button onclick="nextVideo()">Next Video</button>
</div>
.video-container {
position: relative;
padding-bottom: 56.25%; /* 16:9 */
padding-top: 30px; /* size of chrome */
height: 0;
overflow: hidden;
}
.video-container iframe,
.video-container object,
.video-container #overlay,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
#overlay {
background:#000;
opacity:0.5;
/*background:rgba(255,255,255,0.8); or just this*/
z-index:50;
color:#fff;
}
with this is perfect
video {
position: fixed;
display:block;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-color:#fff;
background:url(../img/schrijven.jpg) no-repeat;
top: 0px;
left: 0px;
background-size: cover;
background-position: 50% 50%;
/*background-position: 30% 50%;*/
}
See it in action.