"Plyr Test"
Bootstrap 3.3.0 Snippet by sparkktv

Post to Facebook Tweet this

1
2
3
4
5
6
7
8
9
10
11
12
<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="//cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<h2>YouTube</h2>
<div class="video-component jsVideoComponent">
<div class="video-component__poster jsVideoPoster" style="background-image: url(https://img.youtube.com/vi/4IP_E7efGWE/0.jpg)">
<button class="video-component__btn jsVideoBtn" type="button"></button>
</div>
<div class="video-component__video jsVideo" data-type="youtube" data-video-id="4IP_E7efGWE"></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
// plyr.css
.video-component {
position: relative;
height: 300px;
overflow: hidden;
&:not(:last-child) {
margin-bottom: 36px;
}
.plyr {
display: none;
}
.plyr--ready {
position: absolute;
}
.grid__col & {
height: auto;
padding-top: 56.25%;
}
}
.video-component--short {
&,
.grid__col & {
height: 200px;
padding-top: 0;
}
}
.video-component__poster {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-position: center;
background-repeat: norepeat;
background-size: cover;
}
.video-component__btn {
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
// jquery
// plyr.js
jQuery(document).ready(function($) {
var $videoComponent = $('.jsVideoComponent');
if ($videoComponent.length) {
$videoComponent.each(function() {
var $thisComponent = $(this);
var $thisVideo = $thisComponent.find('.jsVideo');
});
// control video
var video = plyr.setup('.jsVideo');
var $button = $('.jsVideoBtn');
$('.plyr').removeAttr('tabindex'); // for tabbing
$button.on('click', function() {
$('.plyr').show();
video[0].pause();
video[0].toggleFullscreen();
video[0].play();
$(this).parent('.jsVideoPoster').siblings('.plyr').attr('tabindex', 0);
});
video[0].on('exitfullscreen', function() {
$('.plyr').hide();
video[0].stop();
$('.plyr').removeAttr('tabindex');
});
}
});
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More

Paper Dashboard React

Questions / Comments: