CODEWITHSUNDEEP
javascriptjqueryhtmlvimeo
Lighty_46
Lighty_46

Reputation: 5170

Multiple custom Vimeo play buttons

I've been looking for a way to create custom Vimeo play buttons and I found this solution by Chris Coyier. Works like I need it too but I can't figure out how to make it work with multiple videos on the page.

I've replaced .getElementById() with .getElementsByClassName() and I'm expecting the use of .closest() to tie each button to the video, but so far no luck.

http://codepen.io/anon/pen/VYLrXP

HTML

<div class="video_contain">
  <iframe src="//player.vimeo.com/video/80312270?api=1" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen class="video"></iframe>

  <div class="play-button">
    play 
  </div>
</div>

JS - includes Frogaloop

var iframe = document.getElementsByClassName('video');

// $f == Froogaloop
var player = $f(iframe);

// bind events
var playButton = document.getElementsByClassName("play-button");
playButton.addEventListener("click", function() {
   player.api("play");
   $(this).hide();
});

Could someone help please?

Upvotes: 1

Views: 4186

Answers (1)

Lighty_46
Lighty_46

Reputation: 5170

In the end I didn't use the Frogaloop stuff - I did some simple jQuery to append "?autoplay=1" to the end of the iframe source (which refreshes the iframe and plays it). Obviously this will only work if the src of the video doesn't already have anything else on the end, but it works for my use case.

My solution: http://jsfiddle.net/cqpwn2vh/

JS

// When you click the play button image
$('.play-button').click(function(){
    // Find the iframe in the same element as the image and replace it's src with its own source + "?autoplay=1"
    $(this).siblings("iframe").attr('src', $(this).siblings("iframe").attr('src')+'?autoplay=1');
    // Then in my case I hid the image, but you could do whatever after this, but this wont support pausing.
    $(this).hide();
});

HTML

<li>
    <!--- When this is clicked, find the iframe inside the same <li> and add autoplay to it --->
    <img class="play-button" src="images/play-button.jpg" style="cursor: pointer; position: relative; z-index: 999;" />
    <iframe class="video" src="//player.vimeo.com/video/80312270" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</li>
<li>
    <img class="play-button" src="images/play-button.jpg" style="cursor: pointer; position: relative; z-index: 999;" />
    <iframe class="video" src="//player.vimeo.com/video/80312270" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>
</li>

Upvotes: 1

Related Questions