I have simple HTML 5 video player, I have a function which opens a pop up when the current time is 0:07s, unfortunately, the pop on a small device flow out of a div.
Problem in graphic:
I want the popup to be centered in inside a video player in all devices like this.
Here is Plunker of what I am trying to do: HTML 5 Video Player
Here is HTML
<div class="video-container">
<div class="box1"></div>
<div class="box2"></div>
<video id="video1" class="video-js vjs-default-skin" controls autoplay="true">
<source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
Your browser does not support the video tag.
</video>
<div class="lightbox popUpQuestion1">
<div class="row row-no-padding">
<div class="product-left-col">
<div class="product-main-pic">
<div id="imgContent">
<!-- Sinon si pas de coloris et pas de default Sku
-> Affiche le premier SKU. -->
<img id="popinMainPic" src="http://www.sephora.pl/media/catalog_ProductCatalog/m11470681_P2264_princ_medium.jpg">
</div>
</div>
</div>
<div class="product-right-col">
<div class="prodcut-title">
<H1>Rose Deep Hydration Moisturizer</h1>
</div>
<div class="description-text">
An ultra-hydrating gel cream powered
by hyaluronic acid and time-release
technology for petal-soft skin.
</div>
<div class="product-price">
<span>299,00 zł</span>
</div>
<a target="_blank" href="http://www.sephora.pl/Makijaz/Oczy/Kredki-do-oczu-i-khol/Mini-kredka-do-powiek/P2255003?skuId=315720">
<div class="buy-button animates-in show">KUP TERAZ </div>
</a>
</div>
</div>
</div>
</div> <!-- End of Container -->
Here is css I have so far
body{
background-color: #f0f0f0;
overflow-x: hidden;
margin: 0em 0em;
margin: 0;
padding: 0;
border: 0;
font: inherit;
vertical-align: baseline;
}
h1, h2, h3, h4, h5, h6{
margin: 0;
font-weight: bold;
}
p{
margin: 0;
}
a{
text-decoration: none;
}
video{
width: 1266px;
height: 100%;
left: 0px;
top: 0px;
margin-left: 0px;
margin-top: 0px;
}
img{
float: left;
margin-right: 25px;
}
.container{
width: 100%;
margin: 0px auto;
overflow: hidden;
margin-top: 50px;
}
.descArea{
background-color: #fff;
box-shadow: 0 0 3px #c8c8c8;
padding: 15px;
box-sizing: border-box;
}
/* .videoArea{
position: relative;
} */
.video-container{
position: relative;
height: 100%;
width: 100%;
background-color: #000;
margin:0 auto;
}
.box1{
position: absolute;
background-color: rgba(40, 169, 220, 0);
width: 200px;
height: 200px;
top: 50px;
left: 630px;
cursor: pointer;
}
.box2{
position: absolute;
background-color: rgba(207, 50, 53, 0);
width: 200px;
height: 200px;
top: 70px;
left: 150px;
cursor: pointer;
}
.lightbox{
display: none;
}
.longBtns{
display: block;
}
.buy-button {
background-color: #555;
color: #fff;
font-size: 2em;
cursor: pointer;
width: 182px;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
/* right: 10px; */
/* bottom: 41px; */
}
.product-modal{
background-color: #f5f5f5;
font-size: 1.2em;
width: 65em;
height: 46.3em;
}
.row-no-padding{
display: flex;
}
.sku-label-brand{
font-family: georgia;
letter-spacing: .2em;
}
.description-text {
margin-top: 1%;
line-height: 1.4;
/* font-size: 1.7em; */
/* width: 50%; */
font-size: 24.444px;
font-family: "Century Gothic";
color: rgb(0, 0, 0);
line-height: 1.2;
text-align: left;
margin-bottom: 60px;
}
.product-right-col{
width: 60%;
}
.product-left-col{
width: 50%;
margin-right: 45px;
}
#popinMainPic{
width: 100%;
height: 100%;
}
.sku-link{
margin-bottom: 20px;
}
.product-price{
margin-bottom: 20px;
font-size: 36px;
font-family: "Century Gothic";
color: rgb(0, 0, 0);
font-weight: bold;
line-height: 1.2;
text-align: left;
}
.prodcut-title > h1{
font-size: 30.556px;
font-family: "Century Gothic";
color: rgb(0, 0, 0);
font-weight: bold;
line-height: 1.2;
text-align: left;
margin-bottom: 14px
}
.vjs-marker{
width: 6px !important;
border-radius: 30%;
background-color: white !important;
margin-left: -3.5px;
left: 29.2002%;
height: 6px !important;
border-radius: 100px !important;
bottom: 11px;
-webkit-border-radius: 100px !important;
-moz-border-radius: 100px !important;
-ms-border-radius: 100px !important;
-o-border-radius: 100px !important;
}
.video-js .vjs-big-play-button {
display: none !important;
}
.vjs-has-started .vjs-control-bar {
background: linear-gradient(to bottom,rgba(0,0,0,.1) 0,rgba(0,0,0,.69) 99%,rgba(0,0,0,.7) 100%);
}
.video-js{
width: 100% !important;
}
.video1-dimensions {
height: 100% !important;
width: 100% !important;
}
.featherlight .featherlight-content{
transform: scale(0.7);
-webkit-transform: scale(0.7);
-moz-transform: scale(0.7);
-ms-transform: scale(0.7);
-o-transform: scale(0.7);
}
I have tried to add overflow:hidden to parent div still the same.
What is wrong with my code? any idea or help will be apreciated.
featherlight basically provides you a window sized popup that has position: fixed and is set to be placed at center horizontally and vertically. If you look at the CSS of featherlight, then you'll see it has top: 0; bottom: 0; left: 0; right: 0;. This is the intended behaviour of this plugin.
Moreover, the way this plugin works is by cloning your modal content to its own div and then displaying it. Hence giving you little less control over its positioning.
To override this behaviour, you need to manually calculate top, left and height of the video and then apply this to .featherlight by javascript. This would force the featherlight modal to be displayed over the video only irrespective of the the device width/height.
Hope this helps.
Related
Basically, my CSS code is working for the top right and top left buttons for close and minimize but won't work for the individual mod menu options, if you run the code below you'll see the buttons working except for the ones in the bottom right panel.
In Chrome dev tools It works when setting the hover state active but that's when it only works, My mouse is not actually hovering the object. I used z-index: 255; and it still wouldn't work.
This is for a Tauri app but should still work the same as a webpage
html,body {
margin: 0;
font-family: monospace;
width: 100%;
height: 100%;
overflow: hidden;
}
#Background{
z-index: -5;
position:absolute;
width: 100%;
height: 100%;
background-color: black;
}
#titleBar{
background-color: #444;
width: 100%;
height: 32px;
float: top;
z-index: -1;
}
#mainWindow{
background-color: #555;
width:62%;
height: calc(96% - 12px);
top: 12px;
margin-left: -12px;
position: absolute;
border-radius: 8px;
z-index: -1;
border-radius: 8px;
}
#modsWindow{
background-color: #555;
width: 40%;
height: calc(96% - 12px);
position: absolute;
left: 62%;
top: 12px;
margin-left: 1.5px;
z-index: -1;
}
#titleBar #close{
margin-right: 0 !important;
}
#titleBar #folder{
float: left !important;
}
#titleBar #title{
width: 50%;
height: 100%;
color: white;
background-color: transparent;
position: relative;
left: 25%;
text-align: center;
font-weight: bold;
user-select: none;
font-size: 2.1em;
}
#titleBar .button{
width: 32px;
height: 32px;
float: right;
border: none;
background-color: #333;
color: white;
transition: all 0.25s;
}
#titleBar .button:hover{
background-color: #555;
}
/* Mod Tab */
#modsWindow *{
width: 100%;
height: 5%;
color: white;
text-align: center;
font-size: auto;
word-wrap: break-word;
overflow: hidden;
font-size: 0.75em;
font-weight: bold;
background-color: transparent;
transition: all 0.25s;
border: none;
}
#modsWindow .ACTIVE{
color: green !important;
}
#modsWindow .INACTIVE{
color: red !important;
}
#modsWindow .ACTIVE:hover, #modsWindow .INACTIVE:hover{
background-color: #222;
color: white !important;
}
<!DOCTYPE html>
<html>
<link rel="stylesheet" href="index.css">
<script type="module" src="index.js"></script>
<body>
<div data-tauri-drag-region id="titleBar">
<!-- Close,Minimize, Title & File Buttons-->
<button id="close" class="button">X</button>
<button id="minimize" class="button">-</button>
<button id="folder" class="button">F</button>
<div data-tauri-drag-region id="title">DBFZ Mod Manager</div>
<!-- <div id="title">DBFZ Mod Manager</div> -->
</div>
<div id="Background">
<div id="mainWindow">
</div>
<div id="modsWindow">
<button id="modName" class="ACTIVE">MODNAME [ACTIVE]</button>
<button id="modName" class="INACTIVE">MODNAME [INACTIVE]</button>
</div>
</body>
</html>
In css when you want to hover a child, parent z-index should not be negative
Your problem is here :
#Background{
z-index: -5;
}
change it to
#Background{
z-index: 1;
}
I have this piece of code that has the profile card in the middle of screen regardless what the screen size is. It often appears too small for any type of screen. How can I position the profile card to almost fill the screen?
#import url("https://fonts.googleapis.com/css?family=Montserrat");
#import url("https://fonts.googleapis.com/css?family=Open+Sans");
body, html {
width: 100%;
height: 100%;
font-family: "Montserrat";
color: #303633;
background-color: #C8D9E7;
overflow: hidden;
font-size: 1em;
font-style: normal;
-webkit-appearance: none;
outline: none;
text-rendering: geometricPrecision;
perspective: 1000px;
}
a {
position: relative;
display: inline-block;
padding: 12px 35px;
margin: 0 0 20px;
background-color: #e1306c;
color: white;
border-radius: 5px;
transition: all 0.3s;
letter-spacing: 2px;
font-size: 0.85em;
font-weight: 700;
text-decoration: none;
text-transform: uppercase;
box-shadow: 0 2px 30px rgba(225, 48, 108, 0.4);
}
a:hover {
background-color: #e75d8c;
}
.content-wrapper {
width: 300px;
max-height: 530px;
border-radius: 5px;
box-shadow: 0 2px 30px rgba(0, 0, 0, 0.2);
background: #fbfcee;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
overflow-y: scroll;
overflow-x: hidden;
text-align: center;
}
.content-wrapper .img {
width: 302px;
height: 350px;
position: relative;
overflow: hidden;
}
.content-wrapper img {
/*
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100%;
object-fit: contain;
*/
width: 100%;
height: 100%;
object-fit: cover;
}
.profile--info {
text-align: left;
padding-top: 10px;
}
.profile--info span {
font-family: "Open Sans", "Adobe Blank";
z-index: 1;
left: 15px;
top: 15px;
font-size: 0.575em;
color: rgba(84, 95, 89, 0.75);
display: block;
}
.profile--info span.username {
font-weight: 700;
font-style: normal;
font-size: 1em;
color: black;
}
.profile--info span.userquote {
margin-top: -15px;
font-size: 0.7em;
color: rgba(84, 95, 89, 0.75);
}
.user {
background-color: white;
width: 100%;
margin-top: 0;
max-height: 600px;
position: relative;
padding: 0 30px;
box-sizing: border-box;
}
.user-social-wrapper {
display: flex;
justify-content: space-around;
position: relative;
padding: 5px 0;
padding-bottom: 15px;
}
.user-social-wrapper .user-info {
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-weight: 200;
flex: 1 1;
}
.user-social-wrapper .user-info span:first-child {
font-size: 1.25em;
}
.user-social-wrapper .user-info span:last-child {
font-size: 0.75em;
color: rgba(84, 95, 89, 0.75);
}
.shots {
width: calc(100% + 60px);
margin-left: -30px;
position: relative;
display: flex;
flex-wrap: wrap;
}
.shots .shot {
overflow: hidden;
position: relative;
width: 100px;
height: 100px;
}
.shots .shot img {
transition: all 0.255s;
width: 102px;
}
<div class="content-wrapper">
<div class="user">
<div class="shots">
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/fcc951ea7fb4756657e6a7d042bf28f3/5CB41E95/t51.2885-15/e35/44305549_353634695394272_4379074065337998962_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMjA0MDQ0OTAyMTY1Njc4Mg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/cc7f49ae37334eff4a2e844ffbebaa21/5CB841C6/t51.2885-15/e35/41336764_2309590515939856_3014107714986624367_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg3Nzg1Mjk1Njk0NDkwNTAwMg%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/d8b9d0e098128aad6eac6c39c19439cb/5CD059B2/t51.2885-15/e35/46699770_789255231412285_7247415646102729111_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkyMjcyMTIwOTQyODk0Mjc5NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/a0efc75790b1d1a20306b4b9ee8c0d31/5C9D1D98/t51.2885-15/e35/42593422_668756993510074_548785136612309253_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4MjI5MDk5MzYyODEwOTk0Mw%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/fa49d4e551525ac7a288784e0866f7cf/5CD53EA6/t51.2885-15/e35/44442144_2039456152959656_8454847146314760657_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxMTEwMTUwMTEzOTEzMzk4MA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/845ad7174d012da1d1b62ac375d2b466/5CD46203/t51.2885-15/e35/43816352_986229031581012_2433270463824730761_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg5NTQwODg2MDE5NjA5OTA1NQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/7d4877bc850a66d5aeb539c5510add7e/5C9BD445/t51.2885-15/e35/43621864_2280294755587222_1177965970195440793_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NjY0MTkwODQ0MTE4MDcyOQ%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/5252d016bae25d4ef4bca9e0c0a0306b/5CCFD742/t51.2885-15/e35/42927631_265838184102659_8658034749053379565_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTkxNjkzMDk2MDM3NTMwNTUzOA%3D%3D.2"></div>
<div class="shot"><img src="https://scontent-icn1-1.cdninstagram.com/vp/880acf9db110584cb44b3b69ad0a366f/5CB3E901/t51.2885-15/e35/41866047_1814622118587789_2219135764187038727_n.jpg?_nc_ht=scontent-icn1-1.cdninstagram.com&se=7&ig_cache_key=MTg4NDI5OTEwNzU1ODU4OTEzMg%3D%3D.2"></div>
</div>
<div class="profile--info"><span class="username">ʏɪɴʀᴜɪ ᴅᴇɴɢ</span><span>☺#bobby_dyr</span><br/><span class="userquote">In 2018, ʏɪɴʀᴜɪ ᴅᴇɴɢ received 164❤️, 7✉️ per post by average, and a total of</span></div>
<div class="user-social-wrapper">
<div class="user-info user-posts"><span>104</span><span>Shots</span></div>
<div class="user-info user-followers"><span>16,964</span><span>Likes</span></div>
<div class="user-info user-following"><span>643</span><span>Comments</span></div>
</div>
</div>
I have this piece of code that has the profile card in the middle of screen regardless what the screen size is. It often appears too small for any type of screen. How can I position the profile card to almost fill the screen?
Basically what should I do to adjust it from (too small)to this (ideal)
Just change it:
.shots .shot {
overflow: hidden;
position: relative;
width: 33%; // <-- change it
height: 100px;
flex-grow: 1; // <-- add
}
I would use media queries and target the classes you want to amend on the different screen sizes to make it fit as you need. Some useful links:
https://css-tricks.com/snippets/css/media-queries-for-standard-devices/
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
In your case, you would need to amend the width of the card to 100% on mobile to achieve the design on your screenshot. Hope that makes sense! :)
I want to achieve the mini profile view like in twitter. When we hover a user's name, his mini profile view is coming. But my problem it is going outside of the browser window. I need to adjust it according to the viewport. It should go outside of the window, it should adjust automatically.
it is coming this way
I need it this way
here is the code
<div class="popover__wrapper">
<a>Cyril</a>
<div class="push popover__content">
<div class="contact-card-user">
<div class="left-side">
<img src="../assets/img/profiles/male-user.jpg" alt="">
</div>
<div class="right-side">
<div class="details-wrapper">
<h3>Full Name </h3>
<div class="privilege">Administrator</div>
<div class="designation">Designer</div>
<div class="description">+973 1234 5678</div>
<div class="description">info#company.com</div>
</div>
</div>
</div>
</div>
<style>
.popover__wrapper {
position: relative;
margin-top: 0;
display: block;
cursor: pointer;
}
.popover__content {
opacity: 0;
visibility: hidden;
position: absolute;
left: 40px;
bottom: -90px;
transform: translate(0, 30px);
background-color: transparent;
padding: 0;
width: auto;
}
.popover__content:before {
position: absolute;
z-index: -1;
content: '';
left: -20px;
bottom: 100px;
border-style: solid;
border-width: 10px 10px 10px 10px;
border-color: transparent transparent transparent #a5053d;
transition-duration: 0.3s;
transition-property: transform;
transform: rotate(180deg);
-webkit-transform: rotate(180deg);
}
.contact-card-user {
background: #fff;
display: flex;
width: max-content;
box-shadow: 0px 0px 20px 1px rgba(0, 0, 0, 0.05);
}
.contact-card-user .left-side {
margin-right: 20px;
width: 100%;
max-width: 200px;
}
.contact-card-user .left-side img {
width: 100%;
height: auto;
}
.contact-card-user .right-side {
padding-left: 3px;
padding-top: 5px;
padding-bottom: 10px;
padding-right: 25px;
width: 100%;
max-width: 260px;
}
.contact-card-user .details-wrapper {
text-align: left;
}
.contact-card-user .details-wrapper h3 {
color: #333;
font-size: 16px;
white-space: pre-wrap;
overflow: hidden;
margin-bottom: 1px;
line-height: normal;
}
.contact-card-user .details-wrapper .privilege {
display: inline-block;
color: #a5053c;
font-weight: 400;
font-size: 14px;
letter-spacing: 0.7px;
margin-bottom: 13px;
margin-top: 6px;
border-bottom: 1px solid #00a000;
}
.contact-card-user .details-wrapper .designation {
color: #333;
margin-bottom: 5px;
}
.contact-card-user .details-wrapper .description {
color: #9a9a9a;
font-size: 12px;
line-height: 17px;
}
.contact-card-user .details-wrapper .description {
color: #9a9a9a;
font-size: 12px;
line-height: 17px;
}
</style>
I think may be javascript can solve. Any help?
Thank you
So i want my slider's height to automatically end at the bottom of the screen, and after that there would be other content.
This website has this:
http://skywarriorthemes.com/arcane/landing/
the video's height will automatically fit to the bottom of the screen, in any resolution, and i want that too with my slider.
HTML:
<div id="sliderhome" class="container-fluid">
<div id="layerslider" class="ls-wp-container ls-container ls-fullwidth" style="height:810px; margin: 0px auto; width:100%;">
<div class="ls-slide" data-ls="slidedelay:8000;transition2d:75,79;">
<img src="./images/slider1.png" class="ls-bg" alt="Slide background" />
<h1 class="ls-l" style=" color: #f7f7f7; text-transform: uppercase; font-weight: bold; font-family: Roboto, 'Open Sans', Arial; padding: 15px; border: 0px; font-size: 50px;white-space: nowrap; width: auto; height: auto; margin-left: 0px; margin-top: 0px;top: 76px; left: 52px; display:block; " data-ls="offsetxin:0;offsetyin:-300px;durationin:2000;delayin:600;offsetxout:-50;durationout:1000;"> Welcome to the<br><span style="color: #ff8800;">Hiraeth network!</span></h1>
<h1 class="ls-l" data-ls="offsetxin:0;offsetyin:-300px;durationin:2000;delayin:500;offsetxout:-50;durationout:1000;" style="position: absolute; top: 224px; left: 52px; text-transform: uppercase; font-weight: bold; font-family: Roboto, 'Open Sans', Arial; padding: 15px; border: 0px; font-size: 18px; color: rgb(218, 213, 206); white-space: nowrap; width: auto; height: auto; opacity: 1; -webkit-transform: rotate(0deg) scale(1, 1); margin-left: 0px; margin-top: -209.1291058540763px; display: block; visibility: visible; background-position: initial initial; background-repeat: initial initial;"> For gamers by gamers </h1>
</div>
<div class="ls-slide" data-ls="slidedelay:9500;transition2d:5;timeshift:-3000;">
<img src="./images/slider2.png" class="ls-bg" alt="Slide background">
<p class="ls-l" data-ls="offsetxin:0;offsetyin:-300px;durationin:2000;delayin:200;offsetxout:-50;durationout:1000;" style="top: 52px; left: 31px; color: rgba(255, 90, 90, 0.901961); text-transform: uppercase; font-weight: bold; font-family: Roboto, 'Open Sans', Arial; padding: 15px; border: 0px; font-size: 30px; background-color: rgb(21, 22, 29); white-space: nowrap; width: auto; height: auto; margin-left: 0px; margin-top: 0px; display: block; "> BBPRESS FORUM AND RATING SYSTEM </p>
<p class="ls-l" data-ls="offsetxin:0;offsetyin:-300px;durationin:2000;delayin:0;offsetxout:-50;durationout:1000;" style="top: 136px; left: 32px; text-transform: uppercase; font-weight: bold; font-family: Roboto, 'Open Sans', Arial; padding: 15px; border: 0px; font-size: 18px; color: rgb(218, 213, 206); background-color: rgb(21, 22, 29); white-space: nowrap; width: auto; height: auto; margin-left: 0px; margin-top: 0px; display: block; "> MAKE KICK-ASS REVIEWS AND CREATE AN AWESOME COMMUNITY </p>
</div>
<div class="ls-slide" data-ls="slidedelay:9500;transition2d:5;timeshift:-3000;">
<img src="./images/slider3.png" class="ls-bg" alt="Slide background" style="padding: 0px; border-width: 0px; width: 1170px; height: 301px; margin-left: -585px; margin-top: -150.5px; visibility: visible; opacity: 1;">
<img class="ls-s-1" src="http://skywarriorthemes.com/oblivion/wp-content/uploads/2013/08/b_transparent.png" data-ls="offsetxin:0;offsetyin:-300px;durationin:2000;delayin:500;offsetxout:-50;durationout:1000;" style="position: absolute; top: 0px; left: 0px; opacity: 0.4; width: 1509px; height: 521px; padding: 0px; border-width: 0px; -webkit-transform: rotate(0deg) scale(1, 1); visibility: hidden; margin-left: 0px; margin-top: 0px;">
<h1 class="ls-s-1" data-ls="offsetxin:0;offsetyin:-300px;durationin:2000;delayin:200;offsetxout:-50;durationout:1000;" style="position: absolute; top: 80px; left: 50px; color: rgba(255, 90, 90, 0.901961); text-transform: uppercase; font-weight: bold; font-family: Roboto, 'Open Sans', Arial; padding: 15px; border: 0px; font-size: 28px; background-color: rgb(21, 22, 29); white-space: nowrap; width: auto; height: auto; opacity: 1; -webkit-transform: rotate(0deg) scale(1, 1); margin-left: 0px; margin-top: 0px; display: block; visibility: hidden; background-position: initial initial; background-repeat: initial initial;"> super easy to use page builder </h1>
<h1 class="ls-s-1" data-ls="offsetxin:0;offsetyin:-300px;durationin:2000;delayin:0;offsetxout:-50;durationout:1000;" style="position: absolute; top: 155px; left: 50px; text-transform: uppercase; font-weight: bold; font-family: Roboto, 'Open Sans', Arial; padding: 15px; border: 0px; font-size: 18px; color: rgb(218, 213, 206); background-color: rgb(21, 22, 29); white-space: nowrap; width: auto; height: auto; opacity: 1; -webkit-transform: rotate(0deg) scale(1, 1); margin-left: 0px; margin-top: 0px; display: block; visibility: hidden; background-position: initial initial; background-repeat: initial initial;"> create pages as simple as drag and drop </h1>
<img class="ls-s-1" data-ls="offsetxin:0;offsetyin:300px;durationin:2000;delayin:1200;offsetxout:-50;durationout:1000;" src="./images/305x305.jpg" style="position: absolute; top: 40px; left: 595px; width: 342px; height: 268px; padding: 0px; border-width: 0px; opacity: 1; -webkit-transform: rotate(0deg) scale(1, 1); margin-left: 0px; margin-top: 0px; display: block; visibility: hidden;">
<img class="ls-s-1" data-ls="offsetxin:0;offsetyin:0px;durationin:2000;delayin:4000;offsetxout:-50;durationout:1000;" src="./images/305x305.jpg" style="position: absolute; top: 40px; left: 596px; width: 342px; height: 268px; padding: 0px; border-width: 0px; -webkit-transform: rotate(0deg) scale(1, 1); opacity: 1; visibility: hidden; margin-left: 0px; margin-top: 0px;">
</div>
</div>
</div>
This code itself wont work because there is other js files, but i dont want to share it since its a paid plugin for websites, but as you can see in the beginning of the code you can set the height and width.
You can do this simply using CSS. Here's an example:
Sample HTML:
<div class="nav">
</div>
<div class="video-slider">
</div>
Sample CSS:
.nav{
background-color: rgba(255,0,0,0.8);
height:10vh;
}
.video-slider{
background-color: rgba(0,255,0,0.8);
height:90vh;
}
What makes this work is the use of vh (viewport height). In this example, the nav is taking up 10% of the viewport height and the video-slider is taking up 90% of the viewport height.
Here's a link to the example
https://jsfiddle.net/kz9txg47/
You can use height: 100% it will fit to whole container for the slider
Alright, so my website has a video header. I want it to be responsive when shrinking the browser ( or in mobile view ), how can I do that? It works great when looking at it on my monitor but as soon as I shrink the browser window, the video becomes small and a huge white space appears underneath it ( about 500px high ).
Here's the code:
<div class="header-container">
<div class="video-container">
<video muted preload="true" autoplay="autoplay" loop="loop" volume="0" poster="4.png"
<source src="video/drift.mp4" type="video/mp4">
</video>
</div>
</div>
</div>
.header-container {
width: 100%;
min-height: 1000px;
border-left: none;
border-right: none;
position: relative;
margin-top: 0;
}
.video-container {
position: absolute;
top: 0%;
left: 0%;
height: 1000px;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
z-index: -1;
opacity: 0.78;
width: 100%;
}
.header-container h1 {
color: #3cbc8d;
z-index: 1;
text-align: center;
margin-right: auto;
margin-left: auto;
margin-top: 10%;
border: 3px solid #fffff;
padding: 10px;
border-radius: 15px;
width: 700px;
letter-spacing: 3px;
font-size: 100px;
font-family: 'Montserrat', sans-serif;
}
.header-container h2 {
color: #3cbc8d;
z-index: 1;
text-align: center;
margin-right: auto;
margin-left: auto;
border: 3px solid #fffff;
padding: 10px;
border-radius: 15px;
width: 700px;
letter-spacing: 3px;
font-size: 30px;
font-family: 'Montserrat', sans-serif;
}
<div class="header-container">
<div class="video-container">
<video preload="true" autoplay="autoplay" loop="loop" volume="0" poster="4.png"
<source src="video/cruise1.mp4" type="video/mp4">
</video>
<h1>3P4B</h1>
<h2>Portable Power Pack for Boating</h2>
<div class="letsgo">
<span class="glyphicon glyphicon-arrow-down"></span>
</div>
</div>
</div>
</div>
The reason for the whitespace beneath the video, is that the video is keeping its aspect ratio in tact while shrinking to follow the screen size. E.g. since you've locked your .header-container class at a min-height of 1000px, the whitespace you're seeing is the background of the .header-container.
EDIT: Background video is now absolutely positioned, to not interfere with overlapping content. .header-container has been set to 94% of screen height, with a max limit of 1000px.
I think this is probably what you're going for with your current setup:
.header-container {
width: 100%;
width: 100vw;
height: 94%;
height: 94vh;
max-height: 1000px;
border-left: none;
border-right: none;
position: relative;
margin-top: 0;
background-color: #000;
padding: 10% 0 0 0;
box-sizing: border-box;
}
.video-container {
position: absolute;
z-index: 0;
top: 0;
left: 0;
height: 100%;
width: 100%;
overflow: hidden;
}
video {
position: absolute;
opacity: 0.78;
min-width: 100%;
min-height: 100%;
width: auto;
height: auto;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%,-50%);
-mos-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.header-container h1 {
position: relative;
max-width: 80%;
display: block;
margin: 0 auto;
color: #3cbc8d;
z-index: 1;
text-align: center;
border: 3px solid #ffffff;
padding: 10px;
border-radius: 15px;
letter-spacing: 3px;
font-size: 100px;
font-family: 'Montserrat', sans-serif;
}
.header-container h2 {
position: relative;
color: #3cbc8d;
z-index: 1;
text-align: center;
max-width: 80%;
margin: 25px auto;
border: 3px solid #ffffff;
padding: 10px;
border-radius: 15px;
letter-spacing: 3px;
font-size: 30px;
font-family: 'Montserrat', sans-serif;
}
See updated pen here:
http://codepen.io/flapjax/pen/zqXKaY
This scales the video to always fill out the entire background width and/or height of the header-container.
It will emulate the 'cover' attribute and cut off some of either the videos height or width to scale it correctly to fill out the header-container.
Does this help you, Please upload a video of 1920*1080 resolution
Fiddle https://fiddle.jshell.net/3zLx1sdz/