Put a div bellow a full back-ground video - javascript

I'm having some problems with an full background-video. Because I cannot put any other content below the video. Like another section etc.
Here is my code:
<div class="container">
<div class="row">
<div class="col-md-12">
<h1 class="title">Quer achar o emprego dos seus sonhos?</h1>
<p class="sub-title">Com a Joobber é fácil!</p>
<video autoplay loop muted poster="screenshot.jpg" id="background">
<source src="video/work.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col-md-12 new-section">
<h1>NEW SECTION</h1>
</div>
</div>
</div>
<%- include partials/footer.ejs %>
And here is my css:
#background{
position: fixed;
top: 50%;
left: 50%;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
z-index: -100;
-webkit-transform: translateX(-50%) translateY(-50%);
transform: translateX(-50%) translateY(-50%);
background: url(polina.jpg) no-repeat;
background-size: cover;
}
.title{
text-align: center;
}
.sub-title{
text-align: center;
}
.new-section{
width: 100%;
height: 20em;
background-color: black;
}
The problem is that any content that I create, be in the middle of the video container. I wanna put it below.
A print screen about what is happening:Problem

try "padding-top: 200px:" on your Title and see what happens. (The number will have to be adjusted.) There are some other options, but I think that should work.
(Other options, I think you could "float:center;" your video and then "clear:both;" your Title or you could put your Title in a new div below your video...etc. )
Good Luck.

You should consider wrapping your video element and making the wrapper relative positioned:
<div class="video-wrapper">
<video autoplay loop muted poster="screenshot.jpg" id="background">
<source src="video/work.mp4" type="video/mp4">
</video>
</div>
.video-wrapper {
postition: relative;
height: 100vh;
width: 100vw;
}
#background {
position: absolute;
}
The rest of your content should flow properly. You won't need to wrap the code above in Bootstrap code.

Related

Adding Image to the background youtube video on iframe tag

After applying this code I am getting video over Image but I want to add Image over you-tube with play button on it
In this code when I increase the padding of the div which is (padding: 18px) now video get shorter and background Image comes on back
but I want Video should play on clicking Image , video should play on the full container
<div id="background-video" style="background: url(images/fight-c-diff.png) no-repeat; padding: 18px; width: 600px; height: 300px;">
<iframe width="295" height="222" src="https://www.youtube.com/embed/UBCQmEHctCw" frameborder="0" allowfullscreen>
</iframe>
</div>
Please Try This:-
<div id="background-video" style="background: url(https://cdn.pixabay.com/photo/2018/07/20/22/43/adler-3551609_960_720.jpg) top center no-repeat; background-size: cover;">
<iframe width="295" height="222" src="https://www.youtube.com/embed/UBCQmEHctCw" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen>
</iframe>
<a class="play-btn" href="#">Play Button</a>
</div>
Js
jQuery('.play-btn').click(function(e) {
e.preventDefault();
jQuery(this).hide();
jQuery('#background-video').find('iframe').show();
jQuery('#background-video').find('iframe')[0].src += "?autoplay=1";
});
CSS
#background-video { width: 640px; height: 360px; position: relative; }
#background-video iframe { width: 100%; height: 100%; display: none; }
#background-video .play-btn { position: absolute; top: 0px; left: 0px; width: 100%; height: 100%; font-size: 0px; line-height: 0px; background: url(http://www.legacycitychurch.com/media/cover_art/Play%20Button%20Overlay/playbutton.png) center center no-repeat; background-size: 120px auto; }
Videojs should solve your problem in the easiest way possible :)
Take a look! https://docs.videojs.com/posterimage

Make video fit 100% with any choosen screen resolution

I have a problem with my application. Every time when I change my screen resolution, my video starts to move out of position (in the center of the screen). Any suggestions on how to make my video stay in the same location even though I change to any other resolution?
.fullscreen-bg {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;}
.fullscreen-bg_video {
position: absolute;
border: 6px solid;
padding: 8.5px;
background: #dddddd;
border-top-left-radius: 1em;
border-top-right-radius: 1em;
border-bottom-left-radius: 1em;
border-bottom-right-radius: 1em;
border-style: solid;
top: 50%;
left: 50%;
width: auto;
height: auto;
transform: translate(-50%, -50%);
}
html code:
<md-list flex class="side-actions">
<md-list-item ng-repeat="action in $ctrl.sideActions" ng-click="action.callback()">
<md-icon md-svg-src="{{ action.icon }}" aria-label="{{ action.display }}"></md-icon>
<span flex>{{ action.display }}</span>
</md-list-item>
<div class="fullscreen-bg" style="visibility:hidden" id="video_div">
<video class="fullscreen-bg_video" id="video" controls>
<source id="videoSrc" type="video/mp4"> {{$ctrl.videoSrc}}
</video>
<span>
<md-button flex-offset="45" flex="5" class="close" id="closeButton" ng-click="$ctrl.closeVideo()">
<md-icon class="control in-line s-24" md-svg-src="app/assets/icon_remove.svg"></md-icon>
<span>Close</span>
</md-button>
</span>
</div>
</md-list>
According to your CSS I assume your HTML looks something like this:
<div class="fullscreen-bg">
<div class="fullscreen-bg_video">
<video width="320" height="240" controls>
<source src="movie.mp4" type="video/mp4">
<source src="movie.ogg" type="video/ogg">
Your browser does not support the video tag.
</video>
</div>
</div>
If my assumption is correct, all you have to do is give the video a widthof 100%
.fullscreen-bg .fullscreen-bg-video video{
width:100%
height:auto;
}

How to align content on a banner if there's a HTML5 video involved

I may need to re-title this post. I have a HTML5 video but I'm having a very hard time styling it the way I want it to.
HTML
<header>
<div class="video-holder full-img">
<video autoplay loop muted>
<source src="<?php bloginfo('template_url'); ?>/img/syau.webm" type="video/webm">
<source src="<?php bloginfo('template_url'); ?>/img/syau.mp4" type="video/mp4">
</video>
</div>
<div class="container" style="height:100%">
<div class="row" style="height:100%">
<div class="banner-text col-sm-12 col-md-6 col-md-offset-2">
<h1>Step<br>Your<br><span id="type-selector" class="typed-element"></span><br>Up</h1>
</div>
<div class="btn-container col-md-2">
<div class="btn-cta">
<a class="btn btn-primary btn-lg" href="/roster/">Check us out</a>
</div>
</div>
</div>
</div>
</header>
This is how I'm doing HTML5 video. I have Javascript to get the height of the device so the banner always matches it.
Javascript
function windowResizeFunctions(e) {
var windowH = $(window).height(),
headerH = $('#my-navbar').height();
$('header').css('height', windowH);
}
$(window).resize(function(){
window.requestAnimationFrame(windowResizeFunctions);
});
setTimeout(function() { windowResizeFunctions();
});
This is my CSS
header {
position: relative;
overflow: hidden;
width:100%;
height:100vh;
}
.banner-text {
position: relative;
z-index: 200;
text-align: left;
display: table;
float: left;
height: 100%;
}
.banner-text h1 {
display: table-cell;
vertical-align: middle;
}
.btn-container {
z-index: 201;
height: 100%;
display: table;
}
.btn-cta {
display: table-cell;
vertical-align: bottom;
padding-bottom: 90px;
}
.video-holder {
position:absolute;
height:100%;
width:200%;
left:-50%;
}
video {
position:absolute;
top: -99999px;
bottom: -99999px;
left: -99999px;
right: -99999px;
margin: auto;
min-height:100%;
min-width:50%;
}
Now, this is my real live example. On laptop this looks how I want it, but on everything else it's very hard to work with. What I'm trying to achieve is the banner text on the left, and the button on the bottom right of the container so it's leveled with the baseline of the last word.
I thought to do flexbox. I tried giving .row display:flex and .banner-text align-items:center; but that wouldn't work. I tried a variety of HTML changes to move things around and I couldn't get it, I'd post my attempts but this question would become massive.
I just want it to look like this on laptop/desktop. On tablet and mobile I just want it to stack, text on top and button below. This is coded terribly and I'm not sure how to properly do it.
Put the <a> button inside the <h1> tag -- as the last element.
Increase the width of the <h1> tag by changing its parent class from col-md-6 to col-md-8.
Set the following CSS to the button:
float:right;
position:relative;
top:40px;
It's a little hacky and there's def better solutions out there but that would require restructuring your entire DOM. This is the easiest fix.

How to make sure Text always stays on top of Image (even when resizing)?

SITUATION:
I have the following result for my Website:
PROBLEM:
I would like to add content on top of the iPad image so that the content is always "inside" the iPad's screen (even when resizing the window).
QUESTION:
How can achieve that ? I googled for solutions, none helped me. Is there some property to make a div snap to an image ?
CODE:
HTML:
<section class="Contact" id="Contact">
<div class="row">
<div class="col span-1-of-2" >
<h2> Contact </h2>
</div>
<div class="col span-1-of-2 rightPage" >
<img src="Vendors/Images/iPadContact.png" alt="Contact on iPad">
</div>
</div>
</section>
CSS:
section {
height: 100vh;
overflow: hidden;
padding: 0%;
}
.rightPage {
margin-top: 0%;
height: 100vh;
width: 50vh;
}
img {
max-width: 100%;
max-height: 95%;
display: block;
margin-top: 2.5%;
margin-bottom: 2.5%;
margin-left: 0;
}
From what I understood you whant the text inside the iPad image. If that is the case try to set you'r image as background-image :
<section class="Contact" id="Contact">
<div class="row">
<div class="col span-1-of-2" >
<h2> Contact </h2>
</div>
<div class="col span-1-of-2 rightPage" >
Some Text ...
</div>
</div>
</section>
CSS.
.rightPage {
background-image: url("Vendors/Images/iPadContact.png");
background-repeat: no-repeat;
background-size: 100%;
height: 100vh;
max-width: 517px;
}
Add the right image width to max-width

Resize div based on the video size

I've created a button in a video and I've added a <div> on the top of that button. But when I try to resize that video I want that button to resize with that video i.e. I want that <div> to cover that button in the video nicely even when I try to resize the video.
UPDATE
The white box is the div--->
This is what happens when i try to resize the video--->
I tried using percentage values in the CSS but still it's not working maybe because of the outer black bars.
UPDATE 2
.start-button {
width: 42%;
height: 19%;
position: absolute;
top: 3%;
left: 5%;
margin: 20% 0 0 24%;
cursor: pointer;
}
HTML Structure
<div class="container">
<video id="sortedd" class="video-js vjs-default-skin" controls="false" preload="60" data-setup="{}">
<source src="sortedd.mp4" type='video/mp4'/>
</video>
<div class="option-panel">
<!-- Starting of the quiz -->
<div class="start-button"></div>
</div>
</div>
Okay this is how I did it:
The HTML Structure
<div class="container">
<video id="sortedd" class="video-js vjs-default-skin" controls="false" preload="60" data-setup="{}" width="100vw" height="56.25vh">
<source src="sortedd.mp4" type='video/mp4'/>
</video>
<div class="play-button"></div>
</div>
The CSS Styling
.play-button
{
background-color: red;
width: 44vw;
height: 9.687vw;
background: red;
max-height: 18vh;
max-width: 77.222vh;
margin: auto;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 2147483647;
}
After a lot of hit and trials I somehow managed to make it work. Can anyone please explain me the relation between Maximum values of height and width and the normal height and width.

Categories