I'm unable to get Chromium to allow me to overlay text or images over an inline video. I've tried setting the z-index (both in CSS and JS); I've tried adjusting the z-index after the video has already started playing, but no luck.
HTML:
<span id="text">test</span>
<video playsinline autoplay muted loop>
<source src="https://rawgit.com/bower-media-samples/big-buck-bunny-480p-30s/master/video.mp4" type="video/mp4"></source>
</video>
CSS:
video {
width: 300px;
height: 300px;
object-fit: cover;
position: fixed;
z-index: -1;
top: 50px;
left: 0;
}
#text {
color: red;
font-size: 100px;
position: fixed;
z-index: 9999;
}
I have a jsfiddle that works correctly in FF/Chrome/Safari; it's just not working on Chromium... the text stays behind the video.
Is there any way I can overlay over this inline video?
Related
I've made my first website, and I've run into some issues that I cannot solve myself.
The website is Bootstrap 4.
https://jsfiddle.net/NUJ88/cn2bdrw1/ <-- My nav
1: My main issue is compatibility with IE and Edge (Possibly also Firefox). Everything works fine in Chrome.
When I open it in IE11 the nav dropdowns aren't target-able and wont stay open on click. How do I solve this?
2: My second issue is the fullscreen html5 video function, which wont display on IE11 or Edge.
HTML:
<video autoplay muted loop id="homeVideo">
<source src="./local-source-mp4-file" type="video/mp4"; codecs="H.264/MPEG-4">
Your browser does not support HTML5 video.
</video>
CSS:
#homeVideo {
position: relative;
width: auto;
min-width: 100%;
height: auto;
background: transparent url(video-bg.jpg) no-repeat;
background-size: cover;
}
video {
display: block;
}
.video-container {
width: 100%;
max-height: 600px;
overflow: hidden;
position: fixed;
top: 0;
right: 0;
z-index: -100;
This will do the job. The css is responsive so the video keeps its 16:9 ratio on all screen formats. It is not possible to have full width and full height because a video is 16:9 and many screens are not.
If you do not support Opera older then version 25 then you can remove the type="video/ogg" line. All modern browsers support type="video/mp4".
Note that the width="320" height="180" in the <video> tag are doing nothing. The css sets width and responsive height.
The styling of the <video> is terrible. For example, it is not possible to change icons, change button shape, etc. etc. For syling, a Javascript player is required, lik jPlayer http://jplayer.org
Trying to automatically execute the video to full screen (like the full screen button on the video player) is not possible. Even with the Javascript 'requestFullscreen' method it will result in an error Video API can only be initiated by a user gesture. In other words, the full screen can only be started by the website visitor with, for example, a button in the html.
<body>
<div class="videoContainer">
<video width="320" height="180" autoplay controls muted>
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="https://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
</video>
</div>
</body>
with this css to keep the 16:9 ratio on all screen formats
*, *::before, *::after {
box-sizing: border-box;
}
body {
margin: 0;
}
.videoContainer {
display: block;
width: 100%; /* width of video */
position: relative;
margin: 0;
padding: 0;
overflow: hidden;
}
.videoContainer::before {
display: block;
content: "";
padding-top: 56.25%; /* keep 16:9 ratio */
}
.videoContainer video {
position: absolute;
top: 0; bottom: 0; left: 0;
width: 100%;
height: 100%;
border: 0;
}
I have tried using the tag but when the window is resize I need the video to fill the space as the window is resized. At the largest scale it fills the space and as is shrinks it starts to add a lot of white space at the top and bottom.
HTML
<video playsinline autoplay muted loop poster="images/user_item.mp4" class="w-100" style="">
<source src="images/user_item.mp4" type="video/mp4">
</video>
CSS
video {
position: absolute;
min-width: 100%;
min-height: 100%;
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
height: 300px;
border-radius: 5px 0 0 5px;
}
Is it possible to play the video in a canvas and resize the canvas and have it fill the entire space provided?
No need for a canvas, just use CSS. In particular here you want the object-fit property.
By default for video it's set to contains, meaning it will set the size of the media to the smallest side and add borders to the largest, keeping the aspect-ratio of the media.
From your description it's quite unclear if you want the cover which keeps aspect-ratio but cuts the media,
video {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
object-fit: cover;
}
<video src="https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm" autoplay loop muted></video>
or fill, which just stretches/shrinkes the media.
video {
position: absolute;
width: 100vw;
height: 100vh;
top: 0;
left: 0;
object-fit: fill;
}
<video src="https://upload.wikimedia.org/wikipedia/commons/a/a4/BBH_gravitational_lensing_of_gw150914.webm" autoplay loop muted></video>
And for future readers, note that this CSS property can also be set to <canvas>.
i need to use a mp4 video as background.
I would like the video to adapt to the size of the screen and not overlap with what is underneath.
I write:
<video autoplay loop muted poster="<?php echo $wo['config']['theme_url'];?>/img/1-s.png" id="bgvid">
<!-- MP4 must be first for iPad! -->
<source src="<?php echo $wo['config']['theme_url'];?>/video/1bis.mp4" type="video/mp4" /><!-- Safari / iOS video -->
</video>
And my css is:
video#bgvid {
position: absolute; right: 0; bottom: 0;
min-width: 100%; min-height: 100%;
width: auto; height: auto; z-index: -100;
background-size: cover;
z-index: 0;
}
by assigning "top: 0", I would like the video to be displayed with:
height: 100vh;
overflow: hidden;
Hi Matteo is better positioning 50% left and top and after traslate the video to center it inside the page.
With z-index you can use negative number. If the video is used for background, add z-index: -1. In this way the other object stay over the video.
body {
padding:0;
}
video {
position: fixed;
top:50%;
left:50%;
transform:translate(-50%,-50%);
min-height:100%;
min-width:100%;
z-index:-1;
}
<video autoplay loop>
<source src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4" type="video/mp4">
</video>
<h1>
PAGE TITLE
</h1>
I found this https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_fullscreen_video that I think is the best solution for your case.
The key of your problem is the position of the video.
#myVideo {
position: fixed;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
}
Hope it helps!
I'm more backend guy than frontend, so if you consider my question as dummy, sorry for that, but I couldn't find answer :)
My aim is to have background video with parallax using CSS. In general I did manage to do that, but result is not good enough. Because of some reason, video which is in background is under all sections, instead of being in just one section where it supposed to be...
HTML:
<div class="fullScreenPhoto"></div>
<div class="video-container">
<video autoplay poster="" class="video-parallax" loop muted>
<source src="https://showbox-tr.dropbox.com/transcode_video/t/1qz2fy47wt9ay7i/header_background.mp4" type="video/webm">
<source src="https://showbox-tr.dropbox.com/transcode_video/t/1qz2fy47wt9ay7i/header_background.mp4" type="video/mp4">
</video>
</div>
<div class="fullScreenPhoto2"></div>
<div class="fullScreenPhoto3"></div>
CSS:
body{
margin: 0;
padding:0
}
.fullScreenPhoto{
width: 100%;
margin:0;
height:300px;
background-color: red;
}
.fullScreenPhoto2{
width: 100%;
height:300px;
margin:0;
background-color: green;
}
.fullScreenPhoto3{
width: 100%;
margin:0;
height:300px;
background-color: yellow;
}
video {
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;
transition: 1s opacity;
}
.video-container {
height: 600px;
}
.video-parallax {
-webkit-transition-position: fixed;
position: fixed;
}
Here you can fiddle:
Fiddle
where I've duplicated my issue. If you will hide one section, or change z-index for higher, you are able to see, that video is all over the page...
BTW. I know about plugin jQuery -> https://github.com/linnett/backgroundVideo, but I would like to use just CSS.
You can easily do this as you do with image parallax.
The HTML:
<div class="ParallaxVideo">
<video autoplay muted loop>
<source src="http://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
<source src="http://www.w3schools.com/html/mov_bbb.ogg" type="video/ogg">
</video>
<h1>Video Background</h1>
</div>
The CSS
.ParallaxVideo{
height: 300px;
padding-bottom: 50px;
padding-top: 50px;
}
.ParallaxVideo video{
min-width: 100%;
position: fixed;
top:0;
z-index: -999;
}
.ParallaxVideo h1 {
color: #fff;
font-size: 76px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
}
You can also take a look this tutorial for more details:
https://codeconvey.com/video-parallax-background-using-css3/
Here is demo version:
http://codeconvey.com/Tutorials/VideoParallaxBackground/
If you want video to be background only for this one div then you couldn't have parallax effect, because then you need remove position: fixed for .video-parallax (so all styles for this class as I see) and change styles for video to that:
video {
margin:0 auto;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-size: cover;
transition: 1s opacity;
}
You need to set a css height for the video element, or on the element itself like <video height="400">. Updated Fiddle.
For this purpose I am using Materialize CSS. It is straightforward. We want a video as background parallax CSS.
HTML WITH MATERIALIZE CSS
<style>
#anyvideo{
position: absolute;
right: 0;
bottom: 0;
min-width: 10%;
min-height: 100%;
}
</style>
<div class="video-container parallax-container">
<video autoplay muted loop id="anyvideo">
<source src="somevideo.mp4" type="video/mp4">
</video>
</div>
We can also make our video responsive i.e. adjust to screen size accordingly.
<div class="video-container parallax-container">
<video autoplay muted loop id="anyvideo" class="responsive-video">
<source src="somevideo.mp4" type="video/mp4">
</video>
</div>
In the above code only the class="responsive-video" has been added and that makes the video responsive.
Im in need of adding an overlay effect to the background video on a web site design. Eventhough the overlay property is added to the video it does not response to the screen size change as it should be. the size of the overlay varies rapidly but not according to the way with the video.
this is the css part
#video-parallax-video{
z-index: -100;
opacity: 1;
height: 100%;
position: relative;
margin-top:-400px;
}
#video-overlay-features{
position: absolute;
width: 100%;
height: 100%;
background-color: #62625E;
color: #fff;
margin-top: -27px;
opacity: 0.7;
z-index:-20;
}
here is the html code where Ive added the video and the overlay
<div>
<div id="video-overlay-features"></div>
<video id="video-parallax-video" class="item" preload="metadata" loop autoplay muted width="100%" style="margin-top:-290px">
<source src="video/web_.webm" type="video/webm" >
</video>
</div>
Please point me in the right direction. Thanks in advanced