CODEWITHSUNDEEP
jqueryhtmlcss
user3328808
user3328808

Reputation: 43

How to create a simple video gallery in html?

I want create a simple html video gallery in html, where many images show in tables and when we click on any then it play related video. I search but not found something. Is it not possible?

I tried this code:

   <video width="320" height="240" controls autoplay>
  <source src="movie.ogg" type="video/ogg">
  <source src="movie.mp4" type="video/mp4">
  <object data="movie.mp4" width="320" height="240">
    <embed width="320" height="240" src="movie.swf">
  </object>
</video>

but how link this video with any image when we click on that image, video plays.

Upvotes: 1

Views: 20195

Answers (2)

Felix
Felix

Reputation: 38112

Since you're not providing full HTML markup, I'll place the image right before the video as an example:

<img class="galleryImg" src="your image src here" /> 
<video width="320" height="240" controls autoplay>
    <source src="movie.ogg" type="video/ogg">
    <source src="movie.mp4" type="video/mp4">
    <object data="movie.mp4" width="320" height="240">
        <embed width="320" height="240" src="movie.swf">
    </object>
</video>

Then you can do:

$('img.galleryImg').each(function() {
    $(this).next().get(0).play();
});

Upvotes: 1

Sulthan Allaudeen
Sulthan Allaudeen

Reputation: 11310

What you try in w3schools has the follow Live Preview

<video width="320" height="240" controls autoplay>
<source src="movie.ogg" type="video/ogg">
<source src="movie.mp4" type="video/mp4">
<object data="movie.mp4" width="320" height="240">
<embed width="320" height="240" src="movie.swf">
</object>
</video>

You can create a table like http://www.w3schools.com/css/css_image_gallery.asp and then remove, embed the images with your youtube video. So that i will play the video once you click it.

However w3layouts provide gallery template what you expect in easy way you can download it from here.

Upvotes: 0

Related Questions