CODEWITHSUNDEEP
javascriptvideo
chrisl-921fb74d
chrisl-921fb74d

Reputation: 23110

Click to play vimeo

Trying to implement this feature click to play the vimeo video.

I found an example of this and figured it's possible some way. I saw it on this square up page: https://squareup.com/#video-testimonials

Anyone have any idea how they did this? They replaced the image with the video and had it play?

Upvotes: 0

Views: 1498

Answers (2)

roundedbygravity
roundedbygravity

Reputation: 21

I just wrote some query to make this work. Given markup that looks like this:

<img id="vimeo-83741013" class="vimeo" alt=""/>

This jQuery will grab the thumbnail and make it click to play:

//Finds Thumbnails for Vimeo Videos
$('html').find('img.vimeo').each(function(index,item){
  var vimeo_id = this.id.split('-')[1];

  $.ajax({
    type:'GET',
    url: 'http://vimeo.com/api/v2/video/' + vimeo_id + '.json',
    jsonp: 'callback',
    dataType: 'jsonp',
    success: function(data){
      var thumb_src = data[0].thumbnail_large;
      $(item).attr('src', thumb_src);
    } 
  });
});

//Replace Vimeo Thumbnail with Vimeo Video
$('html').on('click', 'img.vimeo', function(){
    var vimeo_id = this.id.split('-')[1];
    var vimeoHeight, vimeoWidth;
    vimeoHeight = $(this).outerHeight();
    vimeoWidth = $(this).outerWidth();

    var $iframe = $('<iframe />', {
      src : '//player.vimeo.com/video/'+vimeo_id+'/?autoplay=1',
      class : 'vimeo',
      frameborder : 0
    })

    $iframe.attr('width',vimeoWidth).attr('height', vimeoHeight);

    $(this).parent().removeClass('video');
    $(this).replaceWith($iframe);
});

You can see an example in action here: http://codepen.io/roundedbygravity/pen/pGAhC

Upvotes: 2

Sebastian Paaske T&#248;rholm
Sebastian Paaske T&#248;rholm

Reputation: 50858

That site uses VideoJS with the vimcss skin.

The video is in fact not hosted on Vimeo, but on Amazon S3, as you can see in the source:

<video id="cafe-video" class="video-js" width="470" height="264" controls="controls" preload="none" poster="https://s3.amazonaws.com/square-production/video/caffelastazione.jpg">
    <source src="https://s3.amazonaws.com/square-production/video/caffelastazione.m4v" type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
    <source src="https://s3.amazonaws.com/square-production/video/caffelastazione.webm" type='video/webm; codecs="vp8, vorbis"' />
    <source src="https://s3.amazonaws.com/square-production/video/caffelastazione.ogv" type='video/ogg; codecs="theora, vorbis"' />
    <object class="vjs-flash-fallback" width="470" height="264" type="application/x-shockwave-flash"
      data="https://d1g145x70srn7h.cloudfront.net/static/0bce7753923e25b5c0d564d064d4c02de79088c1/images/flowplayer.swf">
      <param name="movie" value="https://d1g145x70srn7h.cloudfront.net/static/0bce7753923e25b5c0d564d064d4c02de79088c1/images/flowplayer.swf" />
      <param name="allowfullscreen" value="true" />
      <param name="flashvars" value='config={"playlist":["https://s3.amazonaws.com/square-production/video/caffelastazione.jpg", {"url": "https://s3.amazonaws.com/square-production/video/caffelastazione.m4v","autoPlay":false,"autoBuffering":true}]}' />
      <img src="https://s3.amazonaws.com/square-production/video/caffelastazione.jpg" width="470" height="264" alt="Testimonial" title="No video playback capabilities." />
    </object>
</video>

Upvotes: 0

Related Questions