I am attempting to display text on top of a video background. I have used simple HTML5 and CSS to do this. My code works great for desktop sites using Chrome, Safari and Firefox, but when a user views the page on an Android or iPhone device... only the text shows up and the video refuses to play (I am testing on an iPhone 6s Plus and a Samsung S5).
Here is a live preview of the page in question: http://buzzanimatedvideos.com/video-test/
And here is the CSS & HTML I am using:
.header-unit {
background: #fff;
border: 0 solid #fff;
height: 500px;
border: none;
position: relative;
padding: 0;
overflow: hidden;
text-align: center;
margin: 0 auto;
}
.video_container {
text-align: center;
margin: 0 auto;
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
}
video {
position: absolute;
top: 0;
bottom: 0;
right: 0;
left: 0;
margin: auto;
min-height: 50%;
min-width: 50%;
}
.video-overlay {
position: relative;
z-index: 999;
text-align: center;
margin: 0 auto;
}
.video-overlay-color {
background-color: rgba(0,0,0,0.5);
position: absolute;
width: 100%;
height: 100%;
top: 0%;
bottom: 0;
left: auto;
right: auto;
margin: 0 auto;
text-align: center;
}
.video-overlay-content {
position: absolute;
z-index: 9999;
opacity: 1;
width: 100%;
height: 100%;
top: 25%;
bottom: 0;
left: auto;
right: auto;
margin: 0 auto;
text-align: center;
}
.video-overlay-content h1 {
max-width: 640px;
color: #fff;
margin: 0 auto;
text-align: center;
font-size: 3.1rem;
}
.video-overlay-content p {
margin-top: 1rem;
}
<div class="video-overlay">
<div class="header-unit">
<div class="video_container">
<video poster="/wp-content/themes/buzz/vid/video-still.jpg" preload autoplay loop>
<source src="http://buzzanimatedvideos.com/wp-content/uploads/2015/12/BuzzAnimated_HeroBG.mp4" type="video/mp4" />
<source src="http://buzzanimatedvideos.com/wp-content/uploads/2015/12/BuzzAnimated_HeroBG.webm" type="video/webm" />
<source src="http://buzzanimatedvideos.com/wp-content/uploads/2015/12/BuzzAnimated_HeroBG.ogv" type="video/ogg" />
</video>
</div>
</div>
<div class="video-overlay-color">
<div class="video-overlay-content">
<h1>ANIMATED VIDEOS THAT ENTERTAIN, EXPLAIN & GAIN NEW CUSTOMERS</h1>
<p>WATCH OUR VIDEOS</p>
</div>
</div>
</div>
Does anyone know what the issue is? I have been searching high and low for some type of clue but I have nothing. =/ Thanks for your help!
Awesome. I did not know that. That said, I solved the autoplay on mobile by converting the video into a GIF. I hide the video below 640px and display the GIF instead. The GIF just keeps looping regardless of user input, so it works quite well.
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>
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;
}
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 have two divs like this :
<div id="splash-container">
<video id="splash-video" preload autoplay loop muted>
<source src="videos/splash.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<div id="splash-message">MAYUR BHADRACANT</div>
<div id="splash-submessage">ONLINE PROFILE</div>
</div>
I want the splash-message to show on top of the splash-submessage like this:
http://prntscr.com/bcxu1r
But when I resize the browser: this happens:
http://prntscr.com/bcxuec
My current css right now is:
#splash-container {
position: relative;
overflow: hidden;
width: 100vw;
max-width: 100%;
min-height: 100px;
text-align: center;
margin: 0 auto;
}
#splash-message {
position: absolute;
font-weight: bold;
z-index: 1;
color:white;
font-weight: 300;
letter-spacing: 7px;
left: 0;
width: 100%;
text-align: center;
font-size: 35.5px;
top:40vh;
}
#splash-submessage {
position: absolute;
color: white;
z-index: 1;
font-weight: 300;
letter-spacing: 7px;
left: 0;
width: 100%;
text-align: center;
font-size: 22px;
top:50vh;
}
Any help is appreciated, thanks!
With Flexbox you can center message and submessage and you can use position: absolute on video to remove it from elements flow and then use transform: translate() to center it.
body,
html {
margin: 0;
padding: 0;
}
#splash-container {
display: flex;
height: 100vh;
flex-direction: column;
position: relative;
align-items: center;
justify-content: center;
}
video {
border: 1px solid black;
top: 50%;
left: 50%;
position: absolute;
transform: translate(-50%, -50%);
}
<div id="splash-container">
<video id="splash-video" preload autoplay loop muted>
<source src="videos/splash.mp4" type="video/mp4" />Your browser does not support the video tag. I suggest you upgrade your browser.
</video>
<div id="splash-message">MAYUR BHADRACANT</div>
<div id="splash-submessage">ONLINE PROFILE</div>
</div>