Tạo iframe youtube autoplay và dừng khi qua slider khác trong Owl carousel 2

Chào cả nhà, lại là Thiện Đức đây, 

sau bao ngày bộn bề công việc thì mình lại có chút xíu thời gian ngồi viết tuts nho nhỏ cho các bạn đỡ cơ cực tìm kiếm như mình nhé.
Vào ngay vấn đề chính. 

1 ngày đẹp trời nào đó, vào trang sản phẩm chi tiết, khách hàng yêu cầu làm 1 gallery ảnh sản phẩm slider với Owl carousel. và vào web là video sản phẩm chạy trước. sau đó next qua slider khác thì video phải câm nín.

Mình đã mất 1 buổi mài mò google thì đã mò và viết bài này

Cách tạo iframe youtube autoplay và dừng khi qua slider khác trong Owl carousel 2

Phần đầu tiên: Cách tạo Iframe youtube autoplay:

Phần này đơn giản thôi, chỉ việc lên youtube ấn chia sẽ là emded là có link ngay. Và link gốc sẽ như thế này:

Mình thêm ID = video vào cho iframe nhé

<iframe id=”video” width=”560″ height=”315″ src=”https://www.youtube.com/embed/8rh6BPqaJgw?autoplay=1″ frameborder=”0″ allow=”accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture” allowfullscreen></iframe>

Sau đó. dùng jquery đẩy code này vào sẽ xử được autoplay

setTimeout(function() {
    var url = $('.owl-item.active iframe#video').attr('src')
    url = url+'?autoplay=1';
    $(this).attr('src', url);
}, 3000);

Như vậy là đã giải quyết xong vấn đề số 01

 

Vậy phần thứ 2 là gì ?
Là khi sử dụng OWL Carousel rồi thì làm sao qua slider khác thì Youtube phải câm nín. Ok xem code dưới nhé

$(‘.main-gallery’).owlCarousel({ items: 1, loop: false, dots: false, video: false, // margin: 3, mouseDrag: true, touchDrag: true, pullDrag: true, nav: true, navText: [“<img src='<?php echo get_stylesheet_directory_uri(); ?>/assets/img/back.png’/>”, “<img src='<?php echo get_stylesheet_directory_uri(); ?>/assets/img/next.png’/>”], }).on(‘changed.owl.carousel’, function(event) { $(‘#video’).each(function(index) { $(this).attr(‘src’, $(this).attr(‘src’)); return false; }); })

Anh em chỉ cần chú ý đoạn  on(‘changed.owl.carousel’, function(event) trở về sau là oke nhé. Vì đoạn đầu là code slider thôi à

Chúc anh em thành công.