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>
Related
I currently have a video overlaid on top of an image. I want to blur the borders of the video such that it softly blends into the underlying image below. Is there a way for me to do this with HTML/CSS?
Here's the JS fiddle: https://jsfiddle.net/blahblahtest/d8at3q5h/
#container {
margin-left: 200px;
position: relative;
}
#background_image,
#overlaid_video {
position: absolute;
left: 0;
}
#overlaid_video {
z-index: 10;
margin-top: 65px;
margin-left: 152px;
}
<div id="container">
<div id="background_image">
<img src="https://i.pinimg.com/originals/ee/a4/6b/eea46b9905896b7336f6ca60e238ff67.jpg" height="820px">
</div>
<div id="overlaid_video">
<video id="video" width="256" autoplay muted>
<source src="https://media.gettyimages.com/videos/reptile-video-id473277749" type="video/mp4" />
</video>
</div>
</div>
This is kind of brutal way but better than nothing i guess. Also im quite sure yoo could do the same using clip-path and it could greatly reduce css code.
Adjust width, height and position to your needs
<body>
<div id="container">
<div id="background_image">
<img src="https://i.pinimg.com/originals/ee/a4/6b/eea46b9905896b7336f6ca60e238ff67.jpg" height="820px">
</div>
<div id="overlaid_video">
<div class="container">
<video id="video" width="256" autoplay muted>
<source src="https://media.gettyimages.com/videos/reptile-video-id473277749" type="video/mp4" />
</video>
</div>
</div>
</div>
</body>
#container {
margin-left: 200px;
position: relative;
}
#background_image,
#overlaid_video {
position: absolute;
left: 0;
}
#overlaid_video {
z-index: 10;
margin-top: 65px;
margin-left: 152px;
}
#overlaid_video:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 5%;
height: 95%;
backdrop-filter: blur(5px);
}
.container:before {
content: "";
position: absolute;
top: 0;
right: 0;
width: 5%;
height: 95%;
backdrop-filter: blur(5px);
}
#overlaid_video:after {
content:"";
position: absolute;
top: 0;
left: 2%;
width: 96%;
height: 5%;
backdrop-filter: blur(5px);
}
.container:after {
content:"";
position: absolute;
bottom: 3%;
left: 2%;
width: 96%;
height: 5%;
backdrop-filter: blur(5px);
}
You can used box-shadow to blur the border of image.
#video {
box-shadow: green 0px 0px 25px 10px;
}
i want to make some like this
Unfortunately the video does't show in full height, instead the video is bit out of the screen in height, i cannot even see controls.
I want the video to cover 100% height and width.
My css for this whole component is like this:
.screensaver {
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: gray;
z-index: 9000;
.logo{
background-image: url(~#/assets/test.svg);
}
&-header {
position: fixed;
top: 0;
left: 0;
width: 100%;
background-image: linear-gradient(180deg, rgba(0,0,0,0.5) 0%, rgba(0,0,0,0.00) 100%);
z-index: 1500;
display: flex;
align-items: center;
padding: $layout-size*1.25 $layout-size;
&-left{
flex: 0 0 320px;
}
}
&-body {
top: 0;
position: absolute;
height: 100vh;
width: 100vw;
&:after{
content:'';
background-color: rgba(0,0,0, 0.5);
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
}
video{
min-height: 100%;
min-width: 100%;
height: 100vh;
display: block;
}
&-center {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
text-align: center;
z-index: 10;
}
}
}
=================
My vue Template:
<template>
<div class="screensaver">
<div class="screensaver-header">
<div class="screensaver-header-left">
<span class="logo">Test</span>
</div>
</div>
<div class="screensaver-body">
<video controls autoplay muted loop>
<source :src="require('test.mp4')" type="video/mp4">
</video>
<div class="screensaver-body-center">
<span>icon</span>
<h2>plz touch to unlock</h2>
</div>
</div>
</div>
Found a solution to this Problem. We can manipulate the Video Object, which can change the video optical but the changes are not big, we can easily use this.
video {
height: 100vh;
width: 100vw;
object-fit: fill;
}
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 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;
}