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 :
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/embed/wTcNtgA6gHs?feature=oembed " style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;" webkitallowfullscreen="true">
</iframe>
</div>
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./embed/wTcNtgA6gHs?feature=oembed " style="top: 0px; left: 0px; width: 100%; height: 100%; position: absolute;" webkitallowfullscreen="true">
</iframe>
</div>
- Have u try using plugins like: github./layalk/FlexSlider – abhiklpm Commented Feb 9, 2015 at 9:57
- Actually i use right now as swipper a rewrite version of github./thebird/Swipe I looked at your plugin it seems they got the same issue : flexslider.woothemes./video.html Look at this page in mobile view and try to swipe on the vimeoh video doesnt work. – Anddo0 Commented Feb 9, 2015 at 10:02
4 Answers
Reset to default 1You 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, mand;
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);
mand = {
"event": "mand",
"func": "playVideo"
};
if (player != undefined) {
player.contentWindow.postMessage(JSON.stringify(mand), "*");
}
slideType = previousSlide.attr("class");
if(slideType != undefined)
{
slideType = slideType.split(" ")[1];
player = previousSlide.find("iframe").get(0);
mand = {
"event": "mand",
"func": "pauseVideo"
};
// If you don't using autoplay you should use "stopVideo" instead of "pauseVideo"
if (player != undefined) {
player.contentWindow.postMessage(JSON.stringify(mand), "*");
}
}
});
});
})(jQuery);
Thank you internet and thank you @halillusion. This made it work for me.
The iFrame:
<iframe allowfullscreen="" allow="autoplay" src="https://www.youtube-nocookie./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
mand = { "event": "mand", "func": "playVideo" or "pauseVideo" };player.contentWindow.postMessage(JSON.stringify(mand), "*");
Useful answer: https://stackoverflow./a/7513356
Its mandatory to include below attribute in URL.
rel=0&enablejsapi=1
Note: Go through ment 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 ment below.
Thanks, Anand VK
<!DOCTYPE html>
<html>
<head>
<!-- Anand VK -->
<!-- Jquery library -->
<script src="https://code.jquery./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./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./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./embed/exUQkIkyBBI?rel=0&enablejsapi=1"></iframe>
</div>
<div><img src="http://placekitten./500/480" alt="" width="500" height="400"></div>
<div><img src="http://placekitten./500/460" alt="" width="500" height="400"></div>
<div><img src="http://placekitten./500/440" alt="" width="500" height="400"></div>
<div><img src="http://placekitten./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>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./api/#controller