Skip to content

Instantly share code, notes, and snippets.

@sudomaxime
Created March 1, 2019 15:57
Show Gist options
  • Save sudomaxime/8452f4814da6b37ce2bc1debc0a66915 to your computer and use it in GitHub Desktop.
Save sudomaxime/8452f4814da6b37ce2bc1debc0a66915 to your computer and use it in GitHub Desktop.
<script src="https://player.vimeo.com/api/player.js"></script>
.video-overlay {
background-color: rgba(0, 0, 0, 0.904);
position: fixed;
height: 100%;
z-index: 999;
width: 100%;
top: 0;
left: 0;
display: flex;
justify-content: center;
align-items: center;
display: none;
}
.video-overlay-menu {
position: fixed;
top: 0;
left: 0;
width: 100%;
z-index: 999;
}
.video-overlay-btn {
font-size: 22px;
color: white;
display: inline-block;
padding: 10px;
cursor: pointer;
&:hover {
opacity: 0.8;
}
}
var iframe = document.getElementById('vimeo-embed')
var player = new Vimeo.Player(iframe);
//player.setVolume(0)
$('.video-btn-open').on('click', function() {
$('.video-overlay').css("display", "flex").hide().fadeIn(function() {
$('#vimeo-embed').click();
setTimeout(function() {
player.play();
}, 50)
})
})
$('.video-btn-close').on('click', function() {
$('.video-overlay').fadeOut()
player.pause();
})
<div class="btn btn-primary video-btn-open">Voir la vidéo</div>
<div class="video-overlay">
<div class="video-overlay-menu">
<div class="container-fluid">
<div class="row">
<div class="col-12 text-right">
<span class="video-overlay-btn video-btn-close"><i class="fas fa-times text-white"></i></span>
</div>
</div>
</div>
</div>
<div class="container-fluid">
<div class="row">
<div class="col">
<div class="embed-responsive embed-responsive-16by9" style="max-height: 85vh !important;">
<iframe id="vimeo-embed" src="https://player.vimeo.com/video/79889354?api=1" width="640" height="360" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment