For some reason this is giving me heck and can't find a solid answer.
I have a video playing in the background that goes to full-width and is responsive to the screen size. I have a title/text over the video. But I cannot for the life of me figure out how to vertically center this text to the video in a responsive way! Thanks for any help!
Codepen:
http://codepen.io/149203/pen/VagPxe
html:
<body>
<div class="header-container">
<div class="video-container">
<video preload="true" autoplay="autoplay" loop="loop" volume="0">
<source src="https://originate-v3-prod.s3.amazonaws.com/sites/53854785dc60d94b96000002/pages/53854785dc60d94b96000004/files/Originate_B_W_Small6.mp4" type="video/mp4">
</video>
</div> <!-- video-container -->
<h3>Centered Title</h3>
<h6>This should be vertically and horizontally centered</h6>
</div> <!-- header-container -->
</body>
css:
.header-container {
width: 100%;
height: 100vh;
position: relative;
padding: 1px;
}
.video-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
z-index: -100;
width: 100%;
}
h3,
h6 {
text-align: center;
color: white;
}
pulling in this css:
https://maxcdn.bootstrapcdn.com/bootswatch/3.3.6/cyborg/bootstrap.min.css
Display wrapper to display: table, change child element to display: table-cell, vertiacl-align: middle.
http://codepen.io/anon/pen/ZWwLPP
I found and forked this CodePen. This is the best solution I found. (Uses Bootstrap.)
http://codepen.io/149203/pen/JXxbEL
HTML
<div class="row">
<div class="col-xs-12 vert-center-container">
<video autoplay loop style="width:100%" class="img-responsive">
<source src="https://originate-v3-prod.s3.amazonaws.com/sites/53854785dc60d94b96000002/pages/53854785dc60d94b96000004/files/Originate_B_W_Small6.mp4" />
</video>
<div class="vert-center-text">
<h1>Caption Text</h1>
</div>
</div>
</div>
CSS
.vert-center-text {
position: absolute;
top: 40%;
left: 0;
text-align: center;
width: 100%;
}
.vert-center-text h1 {
color: white;
}
.vert-center-container {
position:relative;
}
simulate the the header container as table and h3,h6 as table-cell with vertical-align:middle
.header-container {
width: 100%;
height: 100vh;
position: relative;
padding: 1px;
display:table;
}
.video-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
z-index: -100;
width: 100%;
}
h3,
h6 {
display:table-cell;
vertical-align:middle;
text-align: center;
color: white;
}
<body>
<div class="header-container">
<div class="video-container">
<video preload="true" autoplay="autoplay" loop="loop" volume="0">
<source src="https://originate-v3-prod.s3.amazonaws.com/sites/53854785dc60d94b96000002/pages/53854785dc60d94b96000004/files/Originate_B_W_Small6.mp4" type="video/mp4">
</video>
</div>
<!-- video-container -->
<h3>Centered Title</h3>
<h6>This should be vertically and horizontally centered</h6>
</div>
<!-- header-container -->
</body>
Related
I want a HTML video tag to fill my card. Like this:
<ion-card>
<ion-card-header>
<ion-card-title>Ion Videp</ion-card-title>
</ion-card-header>
<div class="video-wrapper">
<video #video controls="controls" class="video" autoplay="autoplay">
<source src="../../../assets/push-ups.mp4" type="video/mp4" />
</video>
</div>
</ion-card>
But the Video just keeps the original size.
I tried these css styles:
.video-wrapper {
position: relative;
height: 200px;
}
.video {
position: absolute;
right: 0;
bottom: 0;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
background-size: cover;
overflow: hidden;
}
But it still won't work.
Any Ideas?
.video {
position: absolute;
right: 0;
bottom: 0;
min-width: 100vw; /* you can changes size*/
min-height: 100vh;
z-index: -100;
background-size: cover;
overflow: hidden;
}
I am trying to show a transparent cover when I hover over a <picture /> or a <video />, and hide the cover again when the mouse leaves the image or the video.
Here is my code:
$(document).ready(function() {
$('.cspn-show-on-hover').hover(
function() {
$(this).find('.cspn-cover').css('display', 'table-cell');
},
function() {
$(this).find('.cspn-cover').css('display', 'none');
},
);
});
.cmedia-box {
position: relative;
display: table;
width: 100%;
max-width: 100%;
height: auto;
}
.cmedia {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.cdiv-show-on-hover {
position: absolute;
width: 100%;
height: 100%;
}
.cspn-show-on-hover {
display: table;
position: absolute;
top: 0rem;
left: 0rem;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.cspn-cover {
display: none;
vertical-align: middle;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
background-color: #6b478fb3;
text-align: center;
margin-bottom: 0rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<picture class="cmedia-box">
<div class="cdiv-show-on-hover">
<span class="cspn-show-on-hover">
<span class="cspn-cover"><h1>Hello</h1></span>
</span>
</div>
<img class="cmedia" src="https://cdn.pixabay.com/photo/2018/04/25/08/41/books-3348990_960_720.jpg" />
</picture>
<video class="cmedia-box" controls>
<div class="cdiv-show-on-hover">
<span class="cspn-show-on-hover">
<span class="cspn-cover"><h1>Hello</h1></span>
</span>
</div>
<source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
As you may notice, when you hover on the image, a transparent purple cover is shown. But when I used a <video /> instead of <picture />, the cover no longer appears !
Could anyone help me identify the reason ?
I think you are looking for something like this:
<html>
<head>
<style>
div{display:inline-block;}
img,video{height:200px;}
.cover:hover{background:#fff;opacity:0.15;}
</style>
</head>
<body>
<div class="cover">
<picture class="cmedia-box">
<img class="cmedia" src="https://cdn.pixabay.com/photo/2018/04/25/08/41/books-3348990_960_720.jpg" />
</picture>
</div>
<div class="cover">
<video class="cmedia-box" controls>
<source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
</div>
</body>
</html>
All you need is a wrapper:
.media-cover {
display: inline-block;
position: relative;
}
.media-cover:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background-color: #6b478fb3;
opacity: 0;
}
.media-cover:hover:after {
opacity: 1;
}
<div class="media-cover">
your media object here...
</div>
Here's an example with the media objects centered in a full screen parent:
.media-cover {
position: relative;
display: inline-block;
}
.center-me {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
padding: 0 15%;
border-bottom: 1px solid #eee;
}
.media-cover:after {
content: '';
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
pointer-events: none; /*delete this line to disable interaction with video/picture */
background-color: #6b478fb3;
opacity: 0;
transition: opacity .2s linear; /*delete this line to disable fade effect */
}
.media-cover video, .media-cover picture, .media-cover img {
display: block;
max-width: 100%;
}
.media-cover:hover:after {
opacity: 1;
}
picture img {
max-width: 100%;
display: block;
}
body {margin: 0;}
<div class="center-me">
<div class="media-cover">
<picture class="cmedia-box">
<img class="cmedia" src="https://cdn.pixabay.com/photo/2018/04/25/08/41/books-3348990_960_720.jpg" />
</picture>
</div>
</div>
<div class="center-me">
<div class="media-cover">
<video class="cmedia-box" controls>
<source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
</div>
</div>
Video elements should be treated as images, where they can't have unrelated children elements. Also, you should be able to make the hover event by just using pure css like so:
.cmedia-box:hover .cspn-cover {
display: table-cell;
}
I made it work how you might have intended here:
.cmedia-box {
position: relative;
display: table;
width: 100%;
max-width: 100%;
height: auto;
}
.cmedia {
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.cdiv-show-on-hover {
position: absolute;
width: 100%;
height: 100%;
z-index: 9999;
}
.cspn-show-on-hover {
display: table;
position: absolute;
top: 0rem;
left: 0rem;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
}
.cmedia-box:hover .cspn-cover {
display: table-cell;
}
.cspn-cover {
display: none;
vertical-align: middle;
width: 100%;
max-width: 100%;
height: 100%;
max-height: 100%;
background-color: #6b478fb3;
text-align: center;
margin-bottom: 0rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<picture class="cmedia-box">
<div class="cdiv-show-on-hover">
<span class="cspn-show-on-hover">
<span class="cspn-cover"><h1>Hello</h1></span>
</span>
</div>
<img class="cmedia" src="https://cdn.pixabay.com/photo/2018/04/25/08/41/books-3348990_960_720.jpg" />
</picture>
<div class="cmedia-box">
<div class="cdiv-show-on-hover">
<span class="cspn-show-on-hover">
<span class="cspn-cover"><h1>Hello</h1></span>
</span>
</div>
<video controls>
<source class="cmedia" src="https://cdn.theguardian.tv/mainwebsite/2017/08/04/040717heart_desk.mp4" />
</video>
</div>
My background video is displaying correctly on full sized laptops/desktop display but when I start to minimize it gets clunky and the video zooms in on a building and its height too long on the mobile display.
What media queries can I use to make this video background more responsive?
It doesn't have to be perfect on mobile but somewhat decent.
.fullscreen-bg {
position: relative;
top: 50%;
right: 50%;
bottom: 0px;
left: 0px;
overflow: hidden;
z-index: -1px;
}
.fullscreen-bg__video {
position: relative;
top: 0;
left: 0;
width: auto;
height: auto;
background-size: cover;
transition: 1s opacity;
display: inline-block;
}
#media (min-aspect-ratio: 16/9) {
.fullscreen-bg__video {
height: 300%;
top: -100%;
}
}
#media (max-aspect-ratio: 16/9) {
.fullscreen-bg__video {
width: 300%;
left: -100%;
}
}
#media (max-width: 767px) {
.fullscreen-bg {
background: url('../img/videoframe.jpg') center center / cover no-repeat;
}
.fullscreen-bg__video {
display: none;
}
}
<section>
<div class="fullscreen-bg">
<video loop muted autoplay poster="img/index-11.jpg" class="fullscreen-bg__video">
<source src="video/BnW.webm" type="video/webm">
<source src="video/BnW.mp4" type="video/mp4">
</video>
<div class="container container-wide slider-container">
<div class="jumbotron text-center bg-btn">
<h1 data-wow-duration="2s" class="wow fadeIn">Beautiful.<br>Views.<small data-wow-duration="2s" class="wow fadeIn">City of Chicago</small></h1>
<p data-wow-duration="2s" class="big wow fadeIn"></p>
</div>
</div>
</div>
</section>
try this
position: relative;
right: 0;
bottom: 0;
max-width: 100%;
min-height: 100%;
width: auto;
height: auto;
I am using fullpage.js to create full screen pages.
If you scroll to the next section(s) and scroll back to the first section (with video background and the overlay text), the text is briefly "hidden" behind the video before showing up again.
This problem only happens on my Chrome(Version 49.0.2623.112) so far.
HTML:
<div id="fullpage">
<div class="section">
<div class="text">1233123123</div>
<div class="video-background">
<video autoplay muted loop>
<source data-src="http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4"/>
</video>
</div>
</div>
<div class="section">
<div class="slide" data-anchor="slide1">
<img src="" data-src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/examples/imgs/iphone-blue.png" />
</div>
<div class="slide" data-anchor="slide2">Two 2</div>
</div>
<div class="section">
<img src="" data-src="https://raw.githubusercontent.com/alvarotrigo/fullPage.js/master/examples/imgs/intro.png" />
</div>
<div class="section">Four</div>
</div>
CSS:
.section {
text-align:center;
font-size: 3em;
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.text {
font-size: 123px;
z-index: 2;
position: absolute;
margin: 0 auto;
background-color: red;
}
div.video-background {
position: absolute;
top: 0;
left: 0;
width: 100%;
height:100%;
overflow: hidden;
z-index: 1;
}
div.video-background video {
min-width: 100%;
min-height:100%;
}
Javascript:
$('#fullpage').fullpage({
anchors: ['page1', 'page2', 'page3', 'page4'],
sectionsColor: ['yellow', 'orange', '#C0C0C0', '#ADD8E6'],
});
Demo:
http://codepen.io/anon/pen/jqxqqj
Use translate3d(0,0,0) for the text:
.text {
font-size: 123px;
z-index: 2;
position: absolute;
margin: 0 auto;
background-color: red;
-webkit-transform: translate3d(0,0,0);
-ms-transform: translate3d(0,0,0);
transform: translate3d(0,0,0);
}
I am developing a Simon Says game, and have all the working JavaScript, etc.
The main problem I am having is with the CSS; everything works when you click it,
Here is a mock image of what I want it to look like:
update still having alingment problems have updated my CSS
CSS:
body {
background-color: #333;
color: #fff;
}
ul {
list-style: none;
margin: 0 0 20px 0;
padding: 0;
text-align: center;
}
li {
display: inline-block;
padding: 3px;
}
.wrapper {
position: relative;
width: 640px;
margin: 0 auto;
}
.back {
width:700px;
height:700px;
background-color:black;
}
.pad {
width: 200px;
height: 200px;
z-index: 1;
margin: 10px;
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=60)";
filter: alpha(opacity=60);
opacity: 0.6;
}
.shape1 {
position: absolute;
left: 0;
top: 50%;
margin-top: -300px;
width: 100px;
height: 100px;
background-color: green;
border-radius: 50%;
}
.shape2 {
position: absolute;
left: 50%;
margin-left: -50px;
width: 100px;
height: 100px;
background-color: red;
border-radius: 50%;
}
.shape3 {
position: absolute;
left: 0;
right: 50%;
margin-right: -50px;
width: 100px;
height: 100px;
background-color: yellow;
border-radius: 50%;
}
.shape4 {
position: absolute;
left: 0;
bottom: 50%;
margin-bottom: -50px;
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
}
.level, .score {
width: 50%;
float: left;
text-align: center;
}
.sButton {
width: 30%;
margin: 0 auto;
}
.start {
width: 100%;
height: 30px;
text-align: center;
}
HTML:
<body>
<div class="wrapper">
<div class="back">
<div class="pad shape1" data-pad="1">
<audio preload="auto" class="sound1">
<source src="sounds/mp3/sounds_01.mp3" type="audio/mpeg"/>
<source src="sounds/ogg/sounds_01.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="pad shape2" data-pad="2">
<audio preload="auto" class="sound2">
<source src="sounds/mp3/sounds_02.mp3" type="audio/mpeg"/>
<source src="sounds/ogg/sounds_02.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="pad shape3" data-pad="3">
<audio preload="auto" class="sound3">
<source src="sounds/mp3/sounds_03.mp3" type="audio/mpeg"/>
<source src="sounds/ogg/sounds_03.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="pad shape4" data-pad="4">
<audio preload="auto" class="sound4">
<source src="sounds/mp3/sounds_04.mp3" type="audio/mpeg"/>
<source src="sounds/ogg/sounds_04.ogg" type="audio/ogg"/>
</audio>
</div>
<div class="break"></div>
</div>
<div class="level">
<h2>Level: 1</h2>
</div>
<div class="score">
<h2>Score: 0</h2>
</div>
<ul class="difficulty">
<li>
<input type="radio" class="difOpt" name="difficulty" value="2">Easy
</li>
<li>
<input type="radio" class="difOpt" name="difficulty" value="1" checked>Normal
</li>
<li>
<input type="radio" class="difOpt" name="difficulty" value="0.5">Hard
</li>
<li>
<input type="radio" class="difOpt" name="difficulty" value="0.25">Insane
</li>
</ul>
<div class="sButton">
<button class="start">start</button>
</div>
</div>
</body>
You are going to want to give your shapes an absolute position and use the "top", "left", "right" and "bottom" css properties like so:
.shape1 {
position: absolute;
left: 0;
top: 50%;
margin-top: -50px;
width: 100px;
height: 100px;
background-color: green;
border-radius: 50%;
}
Note that margin-top is used to slightly offset the "top" property. Border-radius will turn these into circles.