1

I'm trying to create a vimeo video player with playlist thumbnails. Has anyone ever done this using dev demon's channel videos? Does anyone have any good advice or can point me in the right direction? Thanks!

  • Is there a player which you are thinking about using for this? For example JW Player or similar? – Natetronn Dec 3 '12 at 19:05
  • No, I wanted to use the default Vimeo video player. – ee_dogg Dec 3 '12 at 19:52
  • Does the solution have to use Channel Videos? – dbigca Dec 3 '12 at 20:17
  • No It doesn't have to. – ee_dogg Dec 3 '12 at 20:26
2

I've done this with Antenna http://dvt.ee/adQTgdT and html/css.

Antenna is a plugin that will generate the exact, most up-to-date YouTube, Vimeo, Wistia, or Viddler embed code available. It also gives you access to the video’s title, its author, the author’s YouTube/Vimeo URL, and a thumbnail. All you have to do is pass it a single URL.

Except I use only the 8 digit numeric ID from the URL so I can add the proper URL in the template to display the vimeo player in a modal window.

player.vimeo.com/video/{custom_field}?autoplay=1
| improve this answer | |
2

If Channel Videos outputs the default Universal Embed Code iframe from Vimeo then you should be good using following embed code variable:

{video:embed_code}

Otherwise you could do it with the video service id variable along with the iframe directly from Vimeo like so:

<iframe src="http://player.vimeo.com/video/{video:service_id}" width="WIDTH" height="HEIGHT" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe>

You could then use one of the jQuery responsive slideshows for example Flexslider or Camera.

Assuming you have the correct embed code (vs using the service id setup I described) and say Camera setup then your gallery/slide might look like this example:

http://www.pixedelic.com/plugins/camera/development/camera_1.0.6/demo/features.htm

You'd probably then do something like following in your template to get the videos via the Channel Video tags:

<div id="videos">
    {exp:channel:entries channel="videos"}
        {exp:channel_videos:videos entry_id="{entry_id}"}

            <div class="video">
                <div data-thumb="{video:img_url}" data-src="{video:img_url_hd}">
                    {video:embed_code} {!-- Use this or use the iframe and video service id var instead. --}
                </div>
            </div>

        {/exp:channel_videos:videos}
    {/exp:channel:entries}
</div>

This will loop through all your videos for a certain channel and create the iframe along with the thumbnail playlist.

Note in the above code we are bringing in two more variables which are for the images:

  • {video:img_url} - link
  • {video:img_url_hd} - link

And the jQuery for Camera might look something like this:

jQuery(function(){

    jQuery('#videos').camera({
        height: '56%',
        loader: 'bar',
        pagination: false,
        thumbnails: true,
        imagePath: '../images/',
        time: 4500
    });

});

(don't forget to link to camera's js file itself as well!)

| improve this answer | |
0

If you want to use the default Vimeo player, then its better to use a plugin to achieve the functionality.

You can try the Youmax plugin - it will embed your Vimeo videos with thumbnails and play it in the Vimeo player.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.