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;
}
Related
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/
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>
This is my CSS and HTML.
div.musiclink {
position: relative;
}
a.music {
width: 258px;
height: 117px;
display: block;
background: deepskyblue url('MUSIC-cursive.png') center top no-repeat;
-webkit-transform: rotate(330deg);
-moz-transform: rotate(330deg);
-ms-transform: rotate(330deg);
-o-transform: rotate(330deg);
transform: rotate(330deg);
}
a.music:hover {
background-image: url('MUSIC-cursive-hover.png');
}
a.store {
position: relative;
left: 500px;
top: 100px;
width: 220px;
height: 110px;
display: block;
background: deeppink url('STORE-cursive.png') center top no-repeat;
-webkit-transform: rotate(30deg);
-moz-transform: rotate(30deg);
-ms-transform: rotate(30deg);
-o-transform: rotate(30deg);
transform: rotate(30deg);
}
a.store:hover {
background-image: url('STORE-cursive-hover.png');
}
<div class="musiclink">
</div>
<div class="storelink">
</div>
The thing is I positioned everything successfully when I used images instead of href links, but now nothing is working the way I want it to. I don't want the images/links to move when I resize the browser.
I'm trying to create vertical angled effect using css3 and transform:skewY(). Problem is that when I use -moz-transform-origin to start from the bottom left corner of the screen firefox does not work as the rest of implementations do. Effect works as expected in chrome, safari and edge. Problem can be seen here.
Code I'm using is as follows.
.skew-heading {
height: 100vh;
background: #0A996F;
position: relative;
z-index: 1;
}
.skew-heading:after {
content: '';
height: 400px;
width: 100%;
display: block;
position: relative;
left: 0;
top: 0px;
background: white;
z-index: -1;
}
.skew-heading-2:after {
-webkit-transform: skewY(-9deg);
-moz-transform: skewY(-9deg);
-ms-transform: skewY(-9deg);
-o-transform: skewY(-9deg);
transform: skewY(-9deg);
-webkit-transform-origin:0 0;
-moz-transform-origin: top;
-ms-transform-origin: top;
-o-transform-origin: top;
transform-origin: top;
}
Background video out of position in Safari only. When I remove "top: 50%" and "left: 50%" it works on Safari but position then becomes out of place in Chrome, etc. Anyone got any ideas on how to get it working on both?
video {
background-repeat: no-repeat;
background-position: left top;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
background: url(../images/vidstill.png) no-repeat;
background-size: cover;
transition: 1s opacity;
}
I was having the same issue. For Safari to recognize the "transform: translateX(-50%) translateY(-50%);" you need to add another line: "-webkit-transform: translateX(-50%) translateY(-50%);"
Adding the "-webkit" will help Safari understand what you want. So it will end up looking like this:
video {
background-repeat: no-repeat;
background-position: left top;
display: inline-block;
position: absolute;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
transform: translateX(-50%) translateY(-50%);
-webkit-transform: translateX(-50%) translateY(-50%);
background: url(../images/vidstill.png) no-repeat;
background-size: cover;
transition: 1s opacity;
}