Using jquery to dynamically load Vimeo videos

Question

I would like to create a function that would allow me to embed my Vimeo videos on my website and run it like a YouTube playlist i.e. when a video link is clicked, rather than reloading the page it only reloads the video. So for example, this being a film website, I have a trailer for the project as well as a few promo clips, I would like to be able to show all of those by simply having the user click a link which loads a new video. How would I do this?

Answer 1

I've also used Vimeo Playlist, found here: http://luwes.co/labs/vimeo-playlist/

You can set where you want the playlist list (on top, bottom or side of the video). Overall it's pretty easy to set up. You just put your video urls in an array in the script:

<div id="player"></div>
<script src="http://luwes.co/vimeowrap.js/vimeowrap.js"></script>
<script src="http://luwes.co/vimeowrap.js/vimeowrap.playlist.js"></script>
<script>
    vimeowrap('player').setup({
        urls: [
            'https://vimeo.com/user3709818',
            'https://vimeo.com/user3709818'
        ],
        plugins: {
            'playlist':{}
        }
    });
</script>

Answer 2

this should work too.

$('#some_video_container').html('<iframe src="http://player.vimeo.com/video/12345?
                                 title=1&amp;byline=1&amp;portrait=1" width="643"
                                 height="360" frameborder="0"></iframe>');

Answer 3

Checkout oembed. The best provider I know of is http://embed.ly

The official JQuery Embed.ly plugin is here: https://github.com/embedly/embedly-jquery

Answer 4

Here you go.

$.getJSON('http://www.vimeo.com/api/oembed.json?url=' + encodeURIComponent('http://vimeo.com/7100569') + '&width=300&callback=?', function(data){
        $('#some_video_container').html(data.html);
});