Lightbox JS Fullscreen Video

0 Nikola Novakovic · September 24, 2014
Hey there!

Currently working on some landing page and I want when I click on a section of the homepage to have a fullscreen lightbox appear with a video in it ( the video will start playing automatically ). Anybody knows any good workarounds for this ? Any jquery plugins or suggestions ? 

Similar effect to https://squareup.com/ ( scroll down to a section where there is a play button, press it and you will see what am I talking about :) )

Thanks in advance!

Post a Reply

Replies

Oldest  Newest  Rating
-1 Nikola Novakovic · September 24, 2014
Lightbox is not a must of course, just a similar effect to that website is a must. I  menaged to do something similar to taht website with using a regular lightbox. I need to customize it of course, right now it has that "lightobxy" feeling. 

But I am happy to hear to that modal solutions. On what parts of css and js of bootstrap are you exactly referring to ? :)
0 Phillip Drake · September 25, 2014
Bootstrap 3 offers several ways to show boxed content ranging from a Jumbotron which allows you to showcase special content, basic panels, and even some nicely structured pop out boxes....check out this page:  http://getbootstrap.com/javascript/#modals
0 JOhaL jaTT · September 25, 2014
Hello mate hope this will help you,  coded for you..


<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Video Background</title>
<style>
body{ margin:0px; }
#background{
position:absolute; 
width:100%;
height:100%;
left:0%;
right:0%;
top:0%;
background-color: #000;
display:none;
}
#my_video{
position:relative; 
width:100%;
height:100%;
left:0%;
right:0%;
top:-32px;
opacity:1;
display:none;
 }
#closeimage{
position:relative; 
float:right;
right:90px;
top:50px;
z-index:1;
cursor:pointer;
opacity:1;
display:none;
}

#mainimage{
position:absolute;
top:30%;
cursor:pointer;

}
#playbtn{
border:none;

position:absolute;
top:50%;
left:48%;
width: 64px;
height: 64px;
cursor:pointer;

}

</style>
<script>
var vid, playbtn, mainimage, closeimage;
function intializePlayer(){
vid = document.getElementById("my_video");
mainimage = document.getElementById("mainimage");
playbtn = document.getElementById("playbtn");
closeimage = document.getElementById("closeimage");
playbtn.addEventListener("click",play,false);
mainimage.addEventListener("click",play,false);
closeimage.addEventListener("click",searchClose,false);
}
window.onload = intializePlayer;
function searchClose(){

vid.pause();
document.getElementById('closeimage').style.display = "none";
document.getElementById('my_video').style.display = "none";
document.getElementById('background').style.display = "none";
}
function play(){
vid.play();
document.getElementById('closeimage').style.display = "block";
document.getElementById('my_video').style.display = "block";
document.getElementById('background').style.display = "block";
}

</script>
</head>
<body>

<img id="mainimage" src="https://dl6rt3mwcjzxg.cloudfront.net/assets/pages/home/video.extra-large-0bc68c77e4f4a2b94d141594bc85767b.jpg" />
<img id="playbtn" src="https://dl6rt3mwcjzxg.cloudfront.net/assets/public-web-styles/global/video-play-b770be0a83ecb44ecdada38d27431ea0.svg" > </img>

<!------------------------------------------->
<div id="background">
<img src="close11.PNG" id="closeimage"/>
<!- Here i did not find any src of close image so please use your own image ->
<video id="my_video"  >
<source src="https://square-production.s3.amazonaws.com/images/videos/redesign/v1/how-square-works-desktop.mp4"/>
</video>

</div>

</body>
</html>
0 Nikola Novakovic · September 25, 2014
OOOOOOOOOOOOOOOOOOOOOHHHHHHHHHHHHH MY :)

This is awesome, just what I wanted . You can not even imagine how much did you just help out and you just saved me from at least one day of custom coding this thing. Amazing. Thank you so much :) 
  • 1

Javascript

107,162 followers
About

A scripting language that is added to standard HTML to create interactive effects, apps, games for the browser.

Links
Moderators