nyanloutre/site-max
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Fenetre modale vidéo YouTube

Browse Source
This commit is contained in:
nyanloutre 2017-07-17 00:56:35 +02:00
parent cfa60d4a02
commit 27bf64b5b5
Signed by: nyanloutre
GPG Key ID: F85D93686A3A9063
1 changed files with 26 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

27
index.html
View File

@ -131,7 +131,7 @@
</div> </div>
</div> </div>
<div class="row"> <div class="row">
<div class="video-portfolio offset-lg-4 col-lg-4 col-sm-6"> <div class="video-portfolio offset-lg-4 col-lg-4 col-sm-6" data-toggle="modal" data-target="#youtubeModal" data-youtubeid="0O2aH4XLbto">
<video loop muted poster="img/portfolio/1.jpg"> <video loop muted poster="img/portfolio/1.jpg">
<source src="video/portfolio/1.webm" type="video/webm"> <source src="video/portfolio/1.webm" type="video/webm">
</video> </video>
@ -160,6 +160,22 @@
</div> </div>
</section> </section>
<div class="modal fade" id="youtubeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New message</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">&times;</span>
</button>
</div>
<div class="modal-body">
<iframe width="853" height="480" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
<!-- Bootstrap core JavaScript --> <!-- Bootstrap core JavaScript -->
<script src="vendor/jquery/jquery.min.js"></script> <script src="vendor/jquery/jquery.min.js"></script>
<script src="vendor/tether/tether.min.js"></script> <script src="vendor/tether/tether.min.js"></script>
@ -193,6 +209,15 @@
video_div.onmouseover = function() {this.children[0].play()}; video_div.onmouseover = function() {this.children[0].play()};
video_div.onmouseout = function() {this.children[0].load()}; video_div.onmouseout = function() {this.children[0].load()};
} }
$('#youtubeModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var youtube_id = button.data('youtubeid') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-body iframe')[0].src = 'https://www.youtube.com/embed/' + youtube_id
})
</script> </script>
</body> </body>