I checked out the Airbnb homepage and I saw the video and the effect you are talking about. What you want is a “video” version of the lightbox. It’s actually a pretty easy effect to achieve. What you need is:
-
A button.
-
A
divto be the lightbox, which appears after theonclickevent of the button is triggered. -
A
divto nest the video inside. -
An actual video to show.
-
A close button to close the lightbox.
I created a simple version for you in this codepen.
You can also check it out using the snippet below.
$(document).ready(function() {
// When the button is clicked make the lightbox fade in in the span of 1 second, hide itself and start the video
$("#button").on("click", function() {
$("#lightbox").fadeIn(1000);
$(this).hide();
// A simple hack to start the video without using the YouTube api
var videoURL = $('#video').prop('src');
videoURL += "?autoplay=1";
$('#video').prop('src', videoURL);
});
// When the close button is clicked make the lightbox fade out in the span of 0.5 seconds and show the play button
$("#close-btn").on("click", function() {
$("#lightbox").fadeOut(500);
$("#button").show(250);
});
});#button {
/* Text */
font-size: 45px;
/* Dimensions */
width: 100px;
height: 100px;
/* Positioning */
position: fixed;
top: 50%;
left: 50%;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/* The code above makes sure the video is
both vertically and horizontally centered
to the screen */
/* Styling */
background-color: rgba(0, 0, 0, 0.95);
border: 0; /* remove annoying grey border */
border-radius: 50%; /* make it a circle */
outline: none; /* Ditch the annoyning blue outline on click */
cursor: pointer;
box-shadow: 0px 0px 0px 2px rgba(0, 0, 0, 0.25);
/* ----- Transformations ----- */
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
/* ----- Transitions ----- */
-webkit-transition: transform .5s ease;
-moz-transition: transform .5s ease;
-ms-transition: transform .5s ease;
-o-transition: transform .5s ease;
transition: transform .5s ease;
}
#button:hover {
/* ----- Transformations ----- */
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
/* ----- Transitions ----- */
-webkit-transition: transform .5s ease;
-moz-transition: transform .5s ease;
-ms-transition: transform .5s ease;
-o-transition: transform .5s ease;
transition: transform .5s ease;
}
#button > i {
/* Text */
color: grey;
text-shadow: 1px 1px rgba(255, 255, 255, 0.2);
/* Make play sign 3d-ish */
/* Positioning */
position: relative;
margin-top: 4px;
margin-left: 6px;
/* ----- Transitions ----- */
-webkit-transition: color .5s ease;
-moz-transition: color .5s ease;
-ms-transition: color .5s ease;
-o-transition: color .5s ease;
transition: color .5s ease;
}
#button:hover > i {
/* Text */
color: white;
/* ----- Transitions ----- */
-webkit-transition: color .5s ease;
-moz-transition: color .5s ease;
-ms-transition: color .5s ease;
-o-transition: color .5s ease;
transition: color .5s ease;
/* When we hover on the button make the play sign white. */
}
#lightbox {
/* ----- Positioning ----- */
position: fixed;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 1;
/* The code above makes sure that the
lightbox covers the entire page*/
/* ----- Visibility ----- */
display: none;
/* ----- Styling ----- */
background-color: rgba(0, 0, 0, 0.95);
/* Normally, most lightboxes do not use
a completely solid black, but with about
90-95% opacity so that the background is
somewhat visible */
}
#video-wrapper {
/* ----- Positioning ----- */
position: absolute;
top: 50%;
left: 50%;
z-index: 2;
-webkit-transform: translate(-50%, -50%);
-moz-transform: translate(-50%, -50%);
-ms-transform: translate(-50%, -50%);
-o-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
/* The code above makes sure the video is
both vertically and horizontally centered
to the screen */
/* ----- Styling ----- */
box-shadow: 0px 0px 5px 1px rgba(0, 0, 0, 0.1);
/* The code above is used to add a little shadow to the video making blend in better */
}
#close-btn {
/* ----- Text ----- */
color: grey;
font-size: 25px;
/* ----- Positioning ----- */
position: fixed;
top: 3%;
right: 3%;
z-index: 2;
/* The code above is used to put the button on the upper right corner of the lightbox */
/* ----- Transformations ----- */
-webkit-transform: scale(1, 1);
-moz-transform: scale(1, 1);
-ms-transform: scale(1, 1);
-o-transform: scale(1, 1);
transform: scale(1, 1);
/* The code above is used to initialize the scale for the button so that it can be used in transitions */
/* ----- Transitions ----- */
-webkit-transition: transform .5s ease, color .5s ease;
-moz-transition: transform .5s ease, color .5s ease;
-ms-transition: transform .5s ease, color .5s ease;
-o-transition: transform .5s ease, color .5s ease;
transition: transform .5s ease, color .5s ease;
}
#close-btn:hover {
/* ----- Text ----- */
color: white;
/* ----- Styling ----- */
cursor: pointer;
/* ----- Transformations ----- */
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
/* ----- Transitions ----- */
-webkit-transition: transform .5s ease, color .5s ease;
-moz-transition: transform .5s ease, color .5s ease;
-ms-transition: transform .5s ease, color .5s ease;
-o-transition: transform .5s ease, color .5s ease;
transition: transform .5s ease, color .5s ease;
}<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.2/css/font-awesome.min.css" rel="stylesheet" />
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<!--Requirements-->
<!--I use a font awesome icon as a close button.
Be sure to include in your file the latest version
of Font Awesome for it to work.
LINK:
https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css-->
<!--Also remember to include the latest version of jQuery
in order for the script to work
LINK: http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js-->
<button id="button"><i class="fa fa-play" aria-hidden="true"></i>
</button>
<div id="lightbox">
<i id="close-btn" class="fa fa-times"></i>
<div id="video-wrapper">
<iframe id="video" width="960" height="540" src="https://www.youtube.com/embed/lJfqK9bgIng" frameborder="0" allowfullscreen></iframe>
</div>
</div>
solved Fullscreen video trigger