Create a video gallery on a web page using jquery or CSS

Question

1.00/5 (1 vote)

See more:

I want to create a page with n videos on it. First only thumbnail of video will show then when click on it video will show on new page with previous and next button..

HTML

<div class="videogallery">
     <iframe src="http://player.vimeo.com/video/28544156?api=1"> </iframe>
     <iframe src="http://player.vimeo.com/video/28544156?api=1"> </iframe>
     <iframe src="http://player.vimeo.com/video/28544156?api=1"> </iframe>
     <iframe src="http://player.vimeo.com/video/28544156?api=1"> </iframe>
 </div>

In this code, videos are directly playing in the player. It look weird.

Please help. Thank you!

What I have tried:

I've tried using jquery for next and previous button..
I'm using the link of previous and next videos..Is there another way of doing this?

Posted 3-Sep-16 7:57am

Member 7864405

Updated 4-Sep-16 3:25am

Jörgen Andersson

Add a Solution

Comments

ZurdoDev 3-Sep-16 14:32pm

You need to just put images that when clicked show the video or use an embedded video player instead of just linking directly to the video.

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 4-Sep-16 0:21am

Perfect.

Member 7864405 4-Sep-16 2:49am

If I use images a thumbs then how it will open in a new page? Do I need some jquery for that?

Member 7864405 4-Sep-16 5:28am

Is it possible to create something like this- http://vaniaheymann.com/
I like this video gallery. Thanks in advance.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

ZurdoDev · Answer 1 · 2016-09-04T03:25:00

Solution 1

Your question is too vague to answer directly. You ask if it is possible to make something like a certain website. Well, of course it is possible. ;)

If you want something just like another site then what you can do is use your browser's developer tools to get an idea for how they did that.

Look at where the js files get loaded in to see if there is a specific library they are using.

Inspect the html elements to see if they are using images or video players or divs or whatever.

Do some investigation and you should get a pretty good idea of how they do it.

Posted 4-Sep-16 3:25am

ZurdoDev

Comments

Member 7864405 4-Sep-16 15:08pm

Okay. Thanks for the tip :)
My ques is- If I use images a thumbs then how it will open in a new page? Do I need some jquery for that?
I'm new in web development so was asking
Thanks!

ZurdoDev 4-Sep-16 20:04pm

Yes, you'll need to write some javascript. Jquery is a javascript library that makes it easier to write javascript.

Member 7864405 5-Sep-16 4:04am

Can you tell me how to do that?
<img src=""/>
<img src=""/>
<img src=""/>
what would be the javascript for them?

ZurdoDev 5-Sep-16 9:03am

Just google "javascript set src of image" and you'll find tons of examples.

Member 7864405 6-Sep-16 13:43pm

I did as you said and its confusing. Can you PLEASE show me a demo how to create a video gallery..if not that then how to open video in new page when clicked on its thumbnail. I would really appreciate your help. Thank you.

Member 7864405 8-Sep-16 9:11am

Will you please help me..I'm stuck here!Please. Won't disturb you again.

ZurdoDev 8-Sep-16 9:14am

You aren't disturbing me, but I won't do the work for you. You won't learn anything if I do. There are lots of demos online. We all have our own jobs so I'll gladly answer questions but I don't have time to do the work for you.