Javascript Vimeo Gallery Basics

I am coding a gallery section for my personal site in JS, using jQuery. http://www.playarmada.com/motion For the above page, I am planning to use JQuery to strip the hyperlinks fro

Solution 1:

To make this easier, you should give some of the relevant HTML elements on your page ids/classes. This makes them easier to reference via. JavaScript.

Add a class to your thumbnail <a> elements; let's give them a class name video-thumbnail. Additionally, give the <iframe> containing your Vimeo video an id; let's call it `video-iframe'.

Thumbnail:

<a class="video-thumbnail" href="http://www.playarmada.com/motion/orrery">
    <imgclass="gt_orrery"src="http://www.playarmada.com/images/thumbs/orrery.jpg"></a>

Iframe:

<iframe id="video-iframe" src="http://player.vimeo.com/video/..."></iframe>

To save space, we can store the video URI a thumbnail points to directly in the <a> tag.

<aclass="video-thumbnail"href="..."video-uri="http://player.vimeo.com/video/..."><img></img></a>

Once this is set up, we can begin the jQuery magic:

$(function() {
    // Add an event listener to the click event for each of your thumbnails
    $('.video-thumbnail').click(function(e) {

        // changes src of the iframe to the one we stored in the clicked thumbnail
        $('#video-iframe').get(0).src = this.getAttribute('video-uri');

        // stops default browser behaviour of loading a new page
        e.preventDefault(); 
    });
});

We basically add an event listener for the 'click' event for all the thumbnails on the page. In this event listener, we get the video uri stored in the clicked thumbnail and tell the iframe to load the uri. We call e.preventDefault() to stop the browser from going to the original link.

If JavaScript is disabled, the thumbnails will stay as regular links. Clicking on them results in the current behaviour where the user goes to a new page with the video.