'Iframe Video (Youtube) swipe
Does anyone got an idea to handle an Iframe video/audio in a slider and get possibility to swipe it and still play it by clicking on it ?
I tried to put an overlay over the iframe and dispatch the event to the iframe but it doesnt seems to work :-/
Here is my previous attempt : http://codepen.io/Anddo0/pen/PwOWxZ
Js Part :
var iFrameContainer = document.querySelector( '#iFrameContainer' );
var overlay = document.querySelector( '#overlay' );
if( iFrameContainer && overlay ){
overlay.addEventListener( 'click', function(){
console.log( 'Add event on Overlay' );
// We transfer the event click to the iframe
event.target.nextElementSibling.dispatchEvent( cloneMouseEvent( event ) );
} );
iFrameContainer.addEventListener( 'click', function(){
console.log( 'Click in IframeContainer' );
} );
}
function cloneMouseEvent( e ) {
var evt = document.createEvent( "MouseEvent" );
evt.initMouseEvent( e.type, e.canBubble, e.cancelable, e.view, e.detail, e.screenX, e.screenY, e.clientX, e.clientY, e.ctrlKey, e.altKey, e.shiftKey, e.metaKey, e.button, e.relatedTarget );
return evt;
}
html :
<div style='position: relative; height:300px; width:300px;'>
<div id='overlay' style='width:100%; height:100%; margin-bottom: 20px; height: 100%; position: absolute; overflow: hidden; z-index: 10;'></div>
<div id='iFrameContainer' style="left: 0px; width: 100%; height: 100%; z-index:9;">
<iframe allowfullscreen="true" frameborder="0" mozallowfullscreen="true" src="//www.youtube.com/embed/wTcNtgA6gHs?feature=oembed " style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;" webkitallowfullscreen="true">
</iframe>
</div>
Solution 1:[1]
You can try this solution, That's how I solved my problem.:
var swiper = new Swiper('.swiper-container', {
pagination: {
el: '.swiper-pagination',
},
});
(function($) {
jQuery(document).ready(function($) {
swiper.on("transitionEnd", function(swiper) {
var currentSlide, slideType, player, command;
currentSlide = $('.swiper-container').find(".swiper-slide-active");
previousSlide = $('.swiper-container').find(".swiper-slide-prev");
slideType = currentSlide.attr("class").split(" ")[1];
player = currentSlide.find("iframe").get(0);
command = {
"event": "command",
"func": "playVideo"
};
if (player != undefined) {
player.contentWindow.postMessage(JSON.stringify(command), "*");
}
slideType = previousSlide.attr("class");
if(slideType != undefined)
{
slideType = slideType.split(" ")[1];
player = previousSlide.find("iframe").get(0);
command = {
"event": "command",
"func": "pauseVideo"
};
// If you don't using autoplay you should use "stopVideo" instead of "pauseVideo"
if (player != undefined) {
player.contentWindow.postMessage(JSON.stringify(command), "*");
}
}
});
});
})(jQuery);
Solution 2:[2]
Its mandatory to include below attribute in URL.
rel=0&enablejsapi=1
Note: Go through comment lines and add those slider library files in head section and save it. once everything added you have to open the file in browser. You can able to see the slider. If find any issue please comment below.
Thanks, Anand VK
<!DOCTYPE html>
<html>
<head>
<!-- Anand VK -->
<!-- Jquery library -->
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<!-- Please include below CDn in head section in html file -->
<script id="iframe-demo" src="https://www.youtube.com/iframe_api"></script>
<!--please inlcude Slick Slider CSS file here -->
<!--Please include Slick Slider JS file Here -->
<style>
.youTubeVideo{position:relative;}
#wrapper{width: 30%; margin: auto;}
.slick-list draggable{margin-top: 3%;}
body{outline: none; background:black;}
:focus{outline: none;}
.slick-list.draggable{margin-top: 10px;}
</style>
</head>
<body>
<div id="wrapper">
<div class="slider">
<div><img src="http://placekitten.com/500/480" alt="" width="500" height="400"></div>
<div class="youTubeVideo">
<div class="video"></div>
<iframe id="videoSwipe" width="465" height="400" src="https://www.youtube.com/embed/exUQkIkyBBI?rel=0&enablejsapi=1"></iframe>
</div>
<div><img src="http://placekitten.com/500/480" alt="" width="500" height="400"></div>
<div><img src="http://placekitten.com/500/460" alt="" width="500" height="400"></div>
<div><img src="http://placekitten.com/500/440" alt="" width="500" height="400"></div>
<div><img src="http://placekitten.com/500/420" alt="" width="500" height="400"></div>
</div>
</div>
<script type="text/javascript">
<!-- Anand VK -->
$('.slider').slick();
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('videoSwipe', {
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(e) {
$('.youTubeVideo').find('.video').addClass('video-overlay');
}
function OverlayOnVideo(playerStatus) {
if (playerStatus == 2) {
$('.youTubeVideo').find('.video').addClass('video-overlay');
}
}
function onPlayerStateChange(e) {
OverlayOnVideo(e.data);
}
$(document).on("click", ".video-overlay", function(){
if(player) {
player.playVideo();
$('.youTubeVideo').find('.video').removeClass('video-overlay');
}
});
</script>
</body>
</html>Solution 3:[3]
Thank you internet and thank you @halillusion. This made it work for me.
The iFrame:
<iframe allowfullscreen="" allow="autoplay" src="https://www.youtube-nocookie.com/embed/XXXXXXX?enablejsapi=1" tabindex="0"></iframe>
Important:
add allow="autoplay" to the iframe
add param "enablejsapi=1" to the youtube url so it responds to postMessage
command = { "event": "command", "func": "playVideo" or "pauseVideo" };player.contentWindow.postMessage(JSON.stringify(command), "*");
Useful answer: https://stackoverflow.com/a/7513356
Solution 4:[4]
I just added another swiper over the middle of the iframe so the youtube controllers are still accessible, and used the swiper controller to sync the underlaying swiper: https://swiperjs.com/api/#controller
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | halillusion |
| Solution 2 | anand vishwakarma |
| Solution 3 | Rino Tovar |
| Solution 4 | havardlj |