Using Flexslider to Play Youtube Videos
I am trying to integrate Youtube video playback in Flexslider . It got Vimeo integration (which works) but Youtube doesn't play at all. How to integrate it?
// Can also be used with $(document).ready()
$(window).load(function() {
// Vimeo API nonsense
var player = document.getElementById('player_1');
$f(player).addEvent('ready', ready);
function addEvent(element, eventName, callback) {
if (element.addEventListener) {
element.addEventListener(eventName, callback, false)
} else {
element.attachEvent(eventName, callback, false);
}
}
function ready(player_id) {
var froogaloop = $f(player_id);
froogaloop.addEvent('play', function(data) {
$('.flexslider-project').flexslider("pause");
});
froogaloop.addEvent('pause', function(data) {
$('.flexslider-project').flexslider("play");
});
}
// Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved.
$(".flexslider-project")
.fitVids()
.flexslider({
animation: "slide",
controlNav: false,
directionNav: true,
slideshow: true,
useCSS: true,
prevText: '',
nextText: '',
video: true,
animationLoop: true,
smoothHeight: false,
before: function(slider){
$f(player).api('pause');
}
});
});
This is how it is output:
<iframe id="player_1" src="<?php echo the_sub_field('video'); ?>" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
+3
source to share
1 answer
Try this: froogaloop.js and jquery.fitvid.js will be available when Flexslider is loaded
<body class="loading">
<div id="container" class="cf">
<div id="main" role="main">
<section class="slider">
<div class="flexslider">
<ul class="slides">
<li>
<iframe id="player_1" src="http://www.youtube.com/embed/gDsj5UZ_1bA?rel=0&player_id=player_1" width="500" height="281" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>
</li>
</ul>
</div>
</section>
</div>
</div>
<!-- jQuery -->
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<!-- FlexSlider -->
<script defer src="../jquery.flexslider.js"></script>
<script type="text/javascript">
$(window).load(function(){
// Vimeo API nonsense
var player = document.getElementById('player_1');
$f(player).addEvent('ready', ready);
function addEvent(element, eventName, callback) {
(element.addEventListener) ? element.addEventListener(eventName, callback, false) : element.attachEvent(eventName, callback, false);
}
function ready(player_id) {
var froogaloop = $f(player_id);
froogaloop.addEvent('play', function(data) {
$('.flexslider').flexslider("pause");
});
froogaloop.addEvent('pause', function(data) {
$('.flexslider').flexslider("play");
});
}
// Call fitVid before FlexSlider initializes, so the proper initial height can be retrieved.
$(".flexslider")
.fitVids()
.flexslider({
animation: "slide",
useCSS: false,
animationLoop: false,
smoothHeight: true,
start: function(slider){
$('body').removeClass('loading');
},
before: function(slider){
$f(player).api('pause');
}
});
});
</script>
<!-- Optional FlexSlider Additions -->
<script src="js/froogaloop.js"></script>
<script src="js/jquery.fitvid.js"></script>
</body>
+1
source to share