This weird circle appears on certain websites (picture bellow), on iphone > safari.
On the safari console i could detect that it is because of the video autoplay, but i am not able to erase it.
I've already tried (with no luck):
1- erase the controls tag
2- video::-webkit-media-controls { display:none !important; }
Thanks-a-bunch
This is a clip of the code:
<div style="position: relative;">
<div style="position: absolute; z-index: -1; top: 0px; left: 0px; bottom: 0px; right: 0px; overflow: hidden; background-image: none; background-size: cover; background-position: 50% 50%; background-repeat: no-repeat;">
<video autoplay="" loop="" muted="" style="margin: auto; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); visibility: visible; width: 855px; height: auto;"><source src="video_5.mp4" type="video/mp4"></video>
</div>
</div>
Couple years late, but this worked for me:
video::-webkit-media-controls-start-playback-button { display: none; }
Related
How do you add a color overlay to a video like this, as seen here:
Here is my code so far:
HTML
<div>
<div id="outer">
<div id="home-top-video">
<video autoplay loop muted width="100%">
<source src="http://view.vzaar.com/2710053.mp4" type="video/mp4" /> Your browser does not support the video tag. We suggest you upgrade your browser.
</video>
<div id="home-text">
<div><img src="http://marquesslondon.herokuapp.com/images/logo.ee1689ee.png"></div>
<h3>LIFESTYLE</h3>
</div>
</div>
</div>
</div>
CSS
#outer {
width: 100%;
display: block;
text-align: center;
position: relative;
overflow: hidden;
min-height: 100vh;
}
#home-top-video {
left: 0%;
top: 0%;
height: 100vh;
width: 100%;
overflow: hidden;
position: absolute;
z-index: -1;
}
#home-text {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
Fiddle here: https://jsfiddle.net/kggv3213/1/
you can try pseudo element with gradient background:
body {
margin:0;
}
#outer {
text-align: center;
position: relative;
overflow: hidden;
min-height: 100vh;
}
#home-top-video:before {
content:"";
position: absolute;
top:0;
right:0;
left:0;
bottom:0;
z-index:1;
background:linear-gradient(to right,rgba(65, 0, 255, 0.4),rgba(255, 0, 232, 0.3));
}
#home-top-video {
left: 0%;
top: 0%;
height: 100vh;
width: 100%;
overflow: hidden;
position: absolute;
z-index: -1;
}
#home-text {
position: absolute;
left: 50%;
top: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
color: #fff;
z-index:1;
}
<div id="outer">
<div id="home-top-video">
<video autoplay loop muted width="100%">
<source src="http://view.vzaar.com/2710053.mp4" type="video/mp4" /> Your browser does not support the video tag. We suggest you upgrade your browser.
</video>
<div id="home-text">
<div><img src="http://marquesslondon.herokuapp.com/images/logo.ee1689ee.png"></div>
<h3>LIFESTYLE</h3>
</div>
</div>
</div>
Keep it simple, just add
#home-top-video:before {
content: '';
position: absolute;
height: 100%;
width: 100%;
background: rgba(255,0,255,0.2); //Change as per your requirement
}
I'm trying to center the text in the middle of JQM page, vertically and horizontally. Using 1.4.5, default theme.
In my .css I have:
.splashDiv {
position: absolute;
top: 50%;
height: 50%;
width: 100%;
text-align: center;
padding:0;
}
HTML
<div class="splashDiv" data-role="page">
Please wait...
</div>
The result is:
The text is vertically centered only if I remove top: 0 directive in developer tools(although not perfectly centered).
My question is what is the proper way according to JQM architecture to have what I want? I am not looking for quick/dirty workaround, unless there is no other way.
UPDATE
Put your splash div within a jQM page instead of making it the page:
<div data-role="page" id="page1">
<div id="cont" role="main" class="ui-content">
<div class="splashDiv" >
Please wait...
</div>
</div>
</div>
.splashDiv {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
DEMO
.splashDiv {
position: absolute;
top: 50%;
width: 100%;
text-align: center;
transform: translateY(-50%);
padding:0;
}
Use this it will align your text vertically center.
Please Try it.
Your HTML
<div data-role="page" id="page1">
<div id="cont" role="main" class="ui-content">
<div class="splashDiv" >
<span>Please wait...</span>
</div>
</div>
</div>
Your CSS
.splashDiv {
position: absolute;
top: 50%;
left: 50%;
height: 50%;
width: 100%;
text-align: center;
padding:0;
overflow: hidden;
transform: translate(-50%, -50%)
}
.splashDiv span {
margin: 0;
background: yellow;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%)
}
DEMO
You need to use the following css:
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
I have a play image which needs centering over another image. I'm using percentages, to try to have it working on all devices, but the percentages are not acting like they should. I have taken screenshots of the mobile site in portrait and landscape, you can find them here http://imgur.com/a/gN53f
The desktop site has an entirely different row which is hidden on small devices, the code below is visible exclusively on the mobile site.
Here's the css:
.parent {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
top: 0;
left: 0;
z-index: 1;
}
.image2 {
position: absolute;
top: 30%;
left: 43%;
z-index: 2;
}
working, sort of. The HTML:
<div class="parent">
<img class="image1" src="https://placehold.it/1"/ alt="1">
<img class="image2" src="https://placehold.it/2"/ alt="2">
</div>
I made your .image1 class a block element, centered the image and using transform property brought image2 in the center
.parent {
position: relative;
top: 0;
left: 0;
}
.image1 {
position: relative;
margin: 0 auto;
display: block;
z-index: 1;
}
.image2 {
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
cursor: pointer;
z-index: 2;
}
<div class="container">
<div class="parent">
<img class="image1" src="http://kingofwallpapers.com/image/image-025.jpg" alt="1" />
<img class="image2" src="https://cdn1.iconfinder.com/data/icons/material-audio-video/20/play-circle-outline-128.png" alt="2" />
</div>
</div>
You’ve set .image1 to be relative, but this won’t have an impact on .image2 since it is not a child of .image1. Also it is unclear what sizes the images will have.
If the second image should always scale up and down with the first one, keeping it’s position, it could be done like so:
.parent {
margin: 0 auto;
max-width: 960px; /* i. e. never exceed 960px in width = max-width of .image1 */
position: relative;
}
.image1 {
display: block;
width: 100%;
}
.image2 {
left: 25%;
position: absolute;
top: 25%;
width: 50%;
}
.image2 would have a 25% distance of .image1’s height/width to top, left and right.
Changed size of image to demonstrate properly
Gave width to parent div to absolute position
.parent {
position: relative;
top: 0;
left: 0;
width: 300px;
}
.image1 {
position: relative;
top: 0;
left: 0;
z-index: 1;
}
.image2 {
position: absolute;
top: 32%;
left: 32%;
z-index: 2;
border: 1px solid;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="parent">
<img class="image1" src="https://placehold.it/300x300"/ alt="1">
<img class="image2" src="https://placehold.it/100x100"/ alt="2">
</div>
</body>
</html>
I your first image dictate the size of the parent container, then you should position your images like this (for my code, I've use divs with fixed size. You could give your images display: block)
.parent {
position: relative;
border: 2px solid gray;
}
.child-1 {
height:300px;
width: 300px;
background: lightgreen;
margin: 0 auto;
}
.child-2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: salmon;
height: 50px;
width: 50px;
}
<div class="parent">
<div class="child-1"></div>
<div class="child-2"></div>
</div>
About responsiveness, use 'media query'
set width for image 2, for example, 50%
now set left: 25%
We are building a product builder using an app that only allows us to change the css and nothing else. Need the preview image inside the div to magnify on hover and be scrollable from corner to corner in order to show the customers all the details on the product. I have already added css to make it scale up on hover but cant get it to scroll. Any help would be greatly appreciated.
.shappify_product_builder .option_image .spritespin-stage {
width: 500px !important;
height: 500px !important;
background-size: 100% !important;
margin-left: 40px;
}
.spritespin-stage { transition: all .2s ease-in-out; }
.spritespin-stage:hover { transform: scale(2); overflow: auto; }
and below is the html. I need the image in the div with .spritespin stage to magnify and be scrollable.
<div id="option_image" class="rotationViewer option_image spritespin-instance" style="max-height: 544px; -webkit-user-select: none; overflow: hidden; position: relative; width: 3600px; height: 3600px;" unselectable="on">
<div class="spritespin-stage" style="width: 3600px; height: 3600px; top: 0px; left: 0px; position: absolute; display: block; background-image: url("//www.shappify-cdn.com/images/78432/86058914/001_first-screen.png"); background-size: 500px 500px; background-position: 0px 0px; background-repeat: no-repeat;"></div>
<div class="spritespin-preload" style="width: 3600px; height: 3600px; top: 0px; left: 0px; position: absolute; display: none;"></div>
</div>
check if below example helps to solve the problem.
https://jsfiddle.net/6wy87p8e/2/
.spritespin-stage {
width: 100px !important;
height: 100px !important;
background-size: 100% !important;
background-color:red;
transition: all .2s ease-in-out;
transform: scale(1);
margin:0;
}
.option_image{overflow:hidden; width:100px;height:100px}
.option_image:hover{overflow:scroll;}
.option_image:hover .spritespin-stage{margin:50px 0 0 50px;transform: scale(2);}
css css3
<div class="shappify_product_builder">
<div class="option_image">
<p class="spritespin-stage">Test content</p>
</div>
</div>
The parent div containing .spritespin-stage:hover needs to have overflow: auto. The parent also needs a fixed width and height, so when the div inside zooms in, the scroll bars spawn instead of growing with .spritespin-stage.
<div id="option_image" class="rotationViewer option_image spritespin-instance" style="max-height: 544px; -webkit-user-select: none; overflow: hidden; position: relative; width: 3600px; height: 3600px;" unselectable="on">
<div class="spritespin-stage" style="width: 3600px; height: 3600px; top: 0px; left: 0px; position: absolute; display: block; background-image: url("//www.shappify-cdn.com/images/78432/86058914/001_first-screen.png"); background-size: 500px 500px; background-position: 0px 0px; background-repeat: no-repeat;"></div>
<div class="spritespin-preload" style="width: 3600px; height: 3600px; top: 0px; left: 0px; position: absolute; display: none;"></div>
</div>
I'm currently aligning an image to the bottom of my div as well as centering it with the following css:
html:
<div class="hello">
<img src="http://bit.ly/1gHcL8T" class="helloImage" />
</div>
css:
.hello {
width: 80%;
height: 200px;
position: relative;
}
.helloImage {
position: absolute;
width: 100px;
left: 50%;
margin-left: -50px;
bottom: 0;
}
However, I want to make this image also responsive by giving it a width as percentage. How would I accomplish this?
JSFiddle:
http://jsfiddle.net/8e7UM/1/
If you're supporting modern browsers, you can do this.
.helloImage {
left: 50%;
bottom: 0;
width: 80%;
position: absolute;
transform: translateX(-50%);
-ms-transform: translateX(-50%);
-moz-transform: translateX(-50%);
-webkit-transform: translateX(-50%);
}
And here is the basic version, without the fancy transforms.
.helloImage {
left: 10%;
right: 20%;
bottom: 0;
position: absolute;
}