-
-
Save barbareshet/24cbbc14dc934f2be3cc31837a06afd1 to your computer and use it in GitHub Desktop.
open a video in bootstrap lightbox responsive.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
first: you have to link bootstrap scripts and css style sheets. | |
second: write this html code | |
{ | |
<a href="#" class="playVideo play-icon-link" data-toggle="modal" data-target="#myModal"><span class="play-icon-span"><i class="fa fa-play" aria-hidden="true"></i></span></a> | |
<!-- Modal --> | |
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> | |
<div class="modal-dialog" role="document"> | |
<div class="modal-content"><!-- | |
<div class="modal-header"> | |
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> | |
</div> --> | |
<div class="modal-body"> | |
<div class="embed-responsive embed-responsive-16by9"><div id="player"></div></div> | |
</div> | |
</div> | |
</div> | |
</div> | |
} | |
third: ad css styling for video to cover screen | |
{ | |
.modal-dialog { | |
width: 80%; | |
height: auto; | |
} | |
.modal-content { | |
background-color: transparent; | |
box-shadow: none; | |
border: none; | |
} | |
.modal { | |
text-align: center; | |
} | |
@media screen and (min-width: 768px) { | |
.modal:before { | |
display: inline-block; | |
vertical-align: middle; | |
content: " "; | |
height: 100%; | |
} | |
} | |
.modal-dialog { | |
display: inline-block; | |
text-align: left; | |
vertical-align: middle; | |
} | |
@media screen and (max-width: 767px) { | |
.modal:before { | |
display: inline-block; | |
vertical-align: middle; | |
content: " "; | |
height: 100%; | |
} | |
.modal-dialog { | |
margin: 0; | |
} | |
} | |
} | |
Fourth: add script for video | |
{ | |
<script src="http://www.youtube.com/player_api?modestbranding=1"></script> | |
<script> | |
// create youtube player | |
var player; | |
function onYouTubePlayerAPIReady() { | |
player = new YT.Player('player', { | |
height: "100%", | |
width: "100%", | |
videoId: '3RDsAkwrgAQ', //add any video id given by youtube here. | |
playerVars: { | |
'autoplay': 0, | |
'controls': 0, | |
'showinfo': 0, | |
'rel' : 0, | |
'modestbranding': 1, | |
}, | |
events: { | |
'onReady': onPlayerReady, | |
'onStateChange': onPlayerStateChange | |
} | |
}); | |
} | |
jQuery(".playVideo").click(function(){ | |
player.playVideo(); | |
}); | |
jQuery('#myModal').on('hidden.bs.modal', function () { | |
player.pauseVideo(); | |
}) | |
// autoplay video | |
function onPlayerReady(event) { | |
//event.target.playVideo(); | |
} | |
// when video ends | |
function onPlayerStateChange(event) { | |
if(event.data === 0) { | |
window.top.location.href = "Enter any url When video end page will go to this url you enter"; | |
} | |
} | |
</script> | |
} | |
All Set! | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment