I have some embedded YouTube videos in my Bootstrap carousel. By default, the carousel advances automatically, but I'd like to to pause when a video is playing.
Is there a trick to detecting when the video is playing? I'd like to do it without using the YouTube API if possible (each carousel has an arbitrary number of videos, and I'd like not to create instances of every video).
Edit: Final Design
I created an overlap over the video:
.video_mask{
position:absolute;
top:0;
left:0;
width:100%;
height:275px;
z-index:25;
opacity:0;
}
When I click on the mask, I set the corresponding iframe to autoplay, hide the mask, and pause the carousel:
$('.video_mask').click(function(){
iframe = $(this).closest('.item').find('iframe');
iframe_source = iframe.attr('src');
iframe_source = iframe_source + "?autoplay=1"
iframe.attr('src', iframe_source);
// hide the mask
$(this).toggle();
// stop the slideshow
$('.projectOverviewCarousel').carousel('pause');
});
When the user clicks on the carousel controls, it resets all masks and iframe urls:
$('.projectOverviewCarousel').on('slide', function(){
var iframeID = getID($(this).find('iframe').attr("id"));
// stop iframe from playing
if(iframeID != undefined){
callPlayer(iframeID, 'stopVideo');
}
// turn on all masks
$('.video_mask').show();
// reset src of all videos
$('.projectOverviewCarousel').find('iframe').each(function(key, value){
url = $(this).attr('src');
if(url.indexOf("autoplay")>0){
new_url = url.substring(0, url.indexOf("?"));
$(this).attr('src', new_url);
}
});
Some things to check out for: make sure the controls for the bootstrap carousel have a z-index greater than the mask (so the person can still progress the slideshow manually).
Hope this is useful to someone else!
You'll need to call the pause function like this: $("#myCarousel"). carousel('pause'); . This is how all methods are called on bootstrap components, following the jQuery UI convention. You can restart the carousel by listening to the blur event then calling the cycle method.
For Youtube iframe videos to trigger a pause on the sliding of the carousel whenever a video is playing, you need to have an indicator on whether a video is considered "playing". You can achieve this by using the player functionalities of the Youtube iframe API with JavaScript.
click(function(){ alert("Clicked."); $('#myCarousel'). carousel({ pause: true, interval: false }); });
Use the [interval]="'0'" input. This will disable the auto-sliding feature. Here's the link to the Carousel Documentation.
I created an overlap over the video:
.video_mask{
position:absolute;
top:0;
left:0;
width:100%;
height:275px;
z-index:25;
opacity:0;
}
When I click on the mask, I set the corresponding iframe to autoplay, hide the mask, and pause the carousel:
$('.video_mask').click(function(){
iframe = $(this).closest('.item').find('iframe');
iframe_source = iframe.attr('src');
iframe_source = iframe_source + "?autoplay=1"
iframe.attr('src', iframe_source);
// hide the mask
$(this).toggle();
// stop the slideshow
$('.projectOverviewCarousel').carousel('pause');
});
When the user clicks on the carousel controls, it resets all masks and iframe urls:
$('.projectOverviewCarousel').on('slide', function(){
var iframeID = getID($(this).find('iframe').attr("id"));
// stop iframe from playing
if(iframeID != undefined){
callPlayer(iframeID, 'stopVideo');
}
// turn on all masks
$('.video_mask').show();
// reset src of all videos
$('.projectOverviewCarousel').find('iframe').each(function(key, value){
url = $(this).attr('src');
if(url.indexOf("autoplay")>0){
new_url = url.substring(0, url.indexOf("?"));
$(this).attr('src', new_url);
}
});
Some things to check out for: make sure the controls for the bootstrap carousel have a z-index greater than the mask (so the person can still progress the slideshow manually).
Hope this is useful to someone else!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With