"Youtube Player in modal with autoplay and stop video when close / allow full screen also"
Bootstrap 3.3.0 Snippet by raulfg

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-12 text-center">
<br/>
<br/>
<br/>
<a href="#" class="btn btn-default btn-lg btn-success" data-toggle="modal" data-target="#videoModal" data-theVideo="http://www.youtube.com/embed/sGbxmsDFVnE">VIEW VIDEO</a>
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<div>
<iframe width="100%" height="350" src="" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/***** MODAL PROPERTIES *****/
.modal-content {
-webkit-box-shadow: none;
box-shadow: none;
background:transparent;
border:none;
outline:none;
}
.modal-content iframe {
border:none;
padding:0;
margin:0;
}
.close {
font-size: 80px;
margin:-20px 0 0 0;
}
/***** MEDIA QUERIES *****/
@media only screen and (max-width: 641px) {
/***** MODAL PROPERTIES *****/
.modal-body {
height:100px;
padding:0;
margin: 0;
}
.modal-content {
padding:0;
margin: 0;
}
.modal-dialog {
position: relative;
width: auto;
margin: 15px;
}
.close {
margin:-12px 0 0 0;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
autoPlayYouTubeModal();
//FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAG
function autoPlayYouTubeModal() {
var trigger = $("body").find('[data-toggle="modal"]');
trigger.click(function () {
var theModal = $(this).data("target"),
videoSRC = $(this).attr("data-theVideo"),
videoSRCauto = videoSRC + "?autoplay=1";
$(theModal + ' iframe').attr('src', videoSRCauto);
$(theModal + ' button.close').click(function () {
$(theModal + ' iframe').attr('src', videoSRC);
});
$('.modal').click(function () {
$(theModal + ' iframe').attr('src', videoSRC);
});
});
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Now UI Kit PRO Angular
arrow key navigation thumbnail gallery modal view
Fancy subscribe modal (md, lg) with delay functionality on page load
Login screen pure Bootstrap 4.0

Questions / Comments: