CODEWITHSUNDEEP
javascriptjqueryhtmlcss
Tom F
Tom F

Reputation: 453

Video Gallery Web Developement

I'm currently building a website and am trying to finish off my video page. I want to have a layout like this: enter image description here

with one big video placeholder at the top and several thumbnails underneath.

When you click on the thumbnails below I want them to load the related video in the space up top. I'm comfortable with the html/css needed to design something like this but not knowledgeable enough to write the php or javascript (not sure what I would need?). What would be a way to go about doing this? I've googled for over half an hour trying to find a solution but searching for video galleries just comes up with a lot of wordpress plugins which I would rather not use.

Anyway, I would be grateful for any advice.

edit: If it makes any difference, I will be embedding youtube videos, not self hosted ones

Upvotes: 0

Views: 1536

Answers (2)

Muhammad Umer
Muhammad Umer

Reputation: 18117

here you go

Demo: http://codepen.io/techsin/full/EjrqVz/

Code at: http://codepen.io/techsin/pen/EjrqVz

$('#vids .thumb').click(function(){
  $('#mainVid video').attr('src',$(this).data('url')).get(0).play() 
});

Video element comes with play method by default it's a native api. So to run a video, all you have to do is invoke method play on video element.

In my code i have jquery selector, i get the native element using get and then call native method play. Jquery doesn't have play for playing videos or sounds method as of now.

The way whole things works is I basically replace the src url of video element and tell it to play. Just like how i would change image without changing the image element itself. That's by changing the src url.

Upvotes: 2

Jonas Grumann
Jonas Grumann

Reputation: 10786

The easiest and quickest way would be to use the youtube embed code from youtube and then swap the src attribute:

http://jsfiddle.net/zs90on6r/

HTML

<iframe width="560" height="315" src="https://www.youtube.com/embed/tXoyQssMwMM" frameborder="0" allowfullscreen></iframe>

<a class="another" href="https://www.youtube.com/embed/mKCRPJcOp90">Time Travel Stories</a>
<a class="another" href="https://www.youtube.com/embed/o_JZbQao6jo">Skate</a>

Javascript (witch jQuery):

$(".another").on("click", function(e) {
    e.preventDefault();
    $("iframe").eq(0).attr("src", $(this).attr("href"));
})

Upvotes: 2

Related Questions