Last active
April 6, 2020 20:35
-
-
Save camipaixao/648ddbc18fb6228eaecd3d67f241f919 to your computer and use it in GitHub Desktop.
Lightbox for Youtube Video
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
<button id="playme" onclick="mostrarVideo('video','videoIframe')">Play</button> | |
<!-- Lightbox video --> | |
<div id="video" class="lightbox" onclick="esconderVideo('video','videoIframe')"> | |
<div class="lightbox-container"> | |
<div class="lightbox-content"> | |
<button onclick="esconderVideo('video','videoIframe')" class="lightbox-close">Fechar | ✕</button> | |
<div class="video-container"> | |
<iframe id="videoIframe" width="960" height="540" src="https://www.youtube.com/embed/v0ALfnB7cAY?controls=0" frameborder="0" allowfullscreen autoplay></iframe> | |
</div> | |
</div> | |
</div> | |
</div> |
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
function mostrarVideo(div,video_id){ | |
var video = document.getElementById(video_id).src; | |
document.getElementById(video_id).src = video+'&autoplay=1'; // adicionando autoplay na URL | |
document.getElementById(div).style.display = 'block'; | |
} | |
// Escondendo o lightbox e removendo o autoplay | |
function esconderVideo(div,video_id) { | |
var video = document.getElementById(video_id).src; | |
var cleaned = video.replace('&autoplay=1',''); // removendo autoplay da URL | |
document.getElementById(video_id).src = cleaned; | |
document.getElementById(div).style.display = 'none'; | |
} |
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
button#playme{ | |
padding: 1rem 2rem; | |
border: 2px solid blue; | |
background: blue; | |
font-size: 1rem; | |
color: white; | |
border-radius: 5px; | |
text-transform: uppercase; | |
font-weight: bold; | |
letter-spacing: .2rem; | |
margin: 0 auto; | |
transition: .4s; | |
} | |
button#playme:hover{ | |
background: transparent; | |
color: blue; | |
} | |
.lightbox{ | |
background-color: rgba(0, 0, 0, 0.8); | |
overflow: scroll; | |
position: fixed; | |
display: none; | |
z-index: 1; | |
bottom: 0; | |
right: 0; | |
left: 0; | |
top: 0; | |
} | |
.lightbox-container { | |
position: relative; | |
max-width: 960px; | |
margin: 7% auto; | |
display: block; | |
padding: 0 3%; | |
height: auto; | |
z-index: 10; | |
} | |
.lightbox-content { | |
box-shadow: 0 1px 6px rgba(0, 0, 0, 0.7); | |
} | |
.lightbox-close { | |
text-transform: uppercase; | |
background: transparent; | |
position: absolute; | |
font-weight: 300; | |
font-size: 12px; | |
display: block; | |
border: none; | |
color: white; | |
top: -22px; | |
right: 3%; | |
} | |
.video-container { | |
padding-bottom: 56.25%; | |
position: relative; | |
padding-top: 30px; | |
overflow: hidden; | |
height: 0; | |
} | |
.video-container iframe, .video-container object, .video-container embed { | |
position: absolute; | |
height: 100%; | |
width: 100%; | |
left: 0; | |
top: 0; | |
} | |
@media screen and (max-width: 768px){ | |
.lightbox-container { | |
margin-top: 10%; | |
} | |
} | |
@media screen and (max-width: 414px) { | |
.lightbox-container { | |
margin-top: 13%; | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment