How to make scroll content over video? - html

I have background <video> on the full page. How can I locate content by center with scrolling over video?
I try to use div with hidden scrollbar, but seem it is not write way.
My HTML code:
<body>
<video autoplay loop poster="polina.jpg" id="bgvid">
<source src="T.webm" type="video/webm">
<source src="T.mp4" type="video/mp4">
</video>
</body>
CSS:
video { display: block; }
video#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(polina.jpg) no-repeat;
background-size: cover;
}

Related

HTML animation intro won't start

I'm doing intro "Merry Christmas" video and I want to use HTML.
https://cleoni.pl/
Chrome - didn't work
Firerfox - it works/didn't work
Opera - it works
Microsoft Edge - it works
#home-bg-video {
position: fixed;
top: 50%;
left: 50%;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
background: #000000;
background-size: cover;
}
<video id="home-bg-video" poster="../video/CHoinka_AR_001_cam_002.jpg" autoplay>
<source src="../video/2019_choinka_dzwonki_77.mp4" type="video/mp4">
<source src="../video/2019_choinka_dzwonki_77.webm" type="video/webm">
</video>

Is this the effect you are looking for?
#home-bg-video {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -1;
background: #000000;
background-size: cover;
animation: mymove 2s;
-webkit-animation: mymove 2s;
}
/* Safari 4.0 - 8.0 */
#-webkit-keyframes mymove {
from {
-webkit-transform: translateX(50%) translateY(50%);
transform: translateX(50%) translateY(50%);
}
to {
-webkit-transform: translateX(0%) translateY(0%);
transform: translateX(0%) translateY(0%);
}
}
/* Standard syntax */
#keyframes mymove {
from {
-webkit-transform: translateX(50%) translateY(50%);
transform: translateX(50%) translateY(50%);
}
to {
-webkit-transform: translateX(0%) translateY(0%);
transform: translateX(0%) translateY(0%);
}
}
<video id="home-bg-video" autoplay>
<source src="https://www.w3schools.com/html/mov_bbb.mp4">
</video>

How to make the contents not leave (carousel BS4)?

I want to make a slider, on which there will be a form or any other text.
But when scaling at + 50-75%, as well as with large contents, this content goes beyond.
Image
jsfiddle.net/sL70r2an/

Change position absolute to fixed for .overlay-startpage
.overlay-startpage {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: 0;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
}
http://jsfiddle.net/mn4y8exu/

responsive video makes white spaces in mobile screen

I have a page that have responsive video in it, it works great in laptop or any wide screen, but i face a problem of white space above nad below the video in vertical screen like mobiles, i used following ccs code:
.background-video {
position: fixed;
z-index: -10;
top: 0;
right: 50%;
bottom: 0;
min-width: 100%;
min-height: 100%;
-webkit-transform: translate(50%, 0);
-moz-transform: translate(50%, 0);
-ms-transform: translate(50%, 0);
-o-transform: translate(50%, 0);
transform: translate(50%, 0);
background: url(../video/video.jpg) no-repeat;
background-size: cover;
}
.section-video {
position: relative;
background-size: cover;
background-position: 50% 50%;
height: 100vh;
z-index: 0;
}
.section-video .bgvid {
-webkit-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-ms-transform: translateX(-50%) translateY(-50%);
-o-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: 100%;
height: 100%;
z-index: -100;
}
here is live preview:
http://shiftmkt.sa/tec/

Try this.
Let me know if you need any changes.
body{
margin: 0;
padding: 0;
}
.section-video .bgvid {
width: 100%;
height: 100%;
}
<div class="section-video">
<video autoplay="" poster="video/video.jpg" class="bgvid" loop="">
<source src="http://shiftmkt.sa/tec/video/video.webm" type="video/webm">
<source src="http://shiftmkt.sa/tec/video/video.mp4" type="video/mp4">
<source src="http://shiftmkt.sa/tec/video/video.ogv" type="video/ogv">
</video>
</div>

css width of child bigger than parent

i have this, and i would like to keep the img normal and rotate the div to a parallelogram, which i managed like this
.parallelogram {
width: 180px;
height: 60px;
overflow: hidden;
-webkit-transform: skew(-21deg);
-moz-transform: skew(15deg);
-o-transform: skew(15deg);
position: relative;
}
.img {
position: absolute;
width: 440px;
height: 150px;
-webkit-transform: skew(21deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
left: 10px;
top: -10px;
}
<div class="parallelogram">
<div class="img">
<img src="https://archive.org/download/AILS-A79-7082/A79-7082.jpg" alt="">
</div>
</div>
My problem is that the img keeps its parent width.
even though i ask it to be 440px its 180px. and i dont understand why.
I tried with vw, and % and none of it works!
Thank you in advance

.parallelogram {
width: 180px;
height: 60px;
overflow: hidden;
-webkit-transform: skew(-21deg);
-moz-transform: skew(15deg);
-o-transform: skew(15deg);
position: relative;
background-color:blue;/*added for testing*/
}
.img {
position: absolute;
width: 440px;
height: 150px;
-webkit-transform: skew(21deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
left:-20px;
right:0px;
top:-10px;
background-color:red;/*added for testing*/
opacity: 0.5;/* makes overlap area purple*/
}
<div class="parallelogram">
<div class="img">
<img..../>
</div>
</div>
I made left:-20px; and right:0px; to make the img appear like parallelogram.
I found this Is there are way to make a child DIV's width wider than the parent DIV using CSS? so I wanted to give it try. I hope this helps.

For the image to take the width of the .img div, you also need this rule, since the <img> tag is a child of the div with class .img:
.img img {
width: 100%;
height: auto;
}
(height: auto; is actually not necessary, since it's the default)
ADDITION AFTER COMMENT:
You have to remove overflow: hidden; from the outer DIV:
.parallelogram {
width: 180px;
height: 60px;
-webkit-transform: skew(-21deg);
-moz-transform: skew(15deg);
-o-transform: skew(15deg);
position: relative;
background-color: blue;
/*added for testing*/
}
.img {
position: absolute;
width: 440px;
height: 150px;
-webkit-transform: skew(21deg);
-moz-transform: skew(-15deg);
-o-transform: skew(-15deg);
left: -20px;
right: 0px;
top: -10px;
background-color: red;
/*added for testing*/
opacity: 0.5;
/* makes overlap area purple*/
}
.img img {
width: 100%;
height: auto;
}
<div class="parallelogram">
<div class="img">
<img src="http://placehold.it/180x60/#0d0"/>
</div>
</div>

Bgvideo won't play in Chrome

I have tried to put a background video in the first page of the site.
With Safari, IE and Mozilla, the video expands to full screen mode, but not in Chrome. Any advice? Here is the site for reference: http://www.camarche.es
video#bgvid {
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-ms-transform: translateX(-50%) translateY(-50%);
-moz-transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(polina.jpg) no-repeat;
background-size: cover;
}