Display VIMEO video thumbnail

On the homepage of http://www.divelicious.com we display images of youtube and vimeo. To get the images of vimeo you can try this. You only need a bit of javascript (and jquery).

<script type="text/javascript">
        $(document).ready(function () {
            $('.vimeothumb').each(function (i, obj) {
                vimeoVideoID = $(this).data('val');
                $.getJSON(
                    'http://www.vimeo.com/api/v2/video/' + vimeoVideoID + '.json?callback=?',
                    { format: "json" },
                    function (data) {
                        var imgId = '#' + data[0].id;
                        $(imgId).attr('src', data[0].thumbnail_small);
                        $(imgId).attr('title', data[0].title);
                        // title
                        // description
                        // thumbnail_large ()
                        // thumbnail_medium (200x150)
                        // thumbnail_small (100x75)
                });
            });
        });
    </script>

And in your HTML you require an img element which carries the vimeothumb with the data-val set to the image which needs to be displayed.

<img id="{vimeoid}" class="img-rounded vimeothumb  videothumb" alt="" data-val="{{vimeoid}" />

Add comment

biuquote
  • Comment
  • Preview
Loading

Sponsored by

Calendar

<<  February 2018  >>
MoTuWeThFrSaSu
2930311234
567891011
12131415161718
19202122232425
2627281234
567891011

View posts in large calendar

RecentComments

TextBox