?
Solved

Embed Videos in HTM Pages

Posted on 2010-01-13
14
Medium Priority
?
312 Views
Last Modified: 2013-11-19
Hi,
I have several videos on YouTube, I need to make a list on my web page where I list the title of the videos and next to each title I place a thumbnail of the video with the play button on it.

Exactly like Facebook.
On facebook, on the wall if I embed a video, the video  apears as a thumbnail and when I click it,  the player playes on the same page in the same spot.  The thumbnail converts into the full sized video.

How can this be achieved?

Thanks
0
Comment
Question by:hhammash
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
14 Comments
 
LVL 11

Expert Comment

by:rajvja
ID: 26303207
<object data="video.avi" type="video/avi" />

to play videos on webpage.
Use hyperlinks to navigate to new page
0
 
LVL 14

Author Comment

by:hhammash
ID: 26306875
I know how to embed videos.  What I want is somehing like Facebook.

Video title,   next to it a thumbnail of the vidoe with a play button at the center.  When I click it,  the thumbnail converts into a player in a real size.

100% like the embeded videos in your facebook wall or profile.

Thanks
0
 
LVL 14

Author Comment

by:hhammash
ID: 26306901
The video is on youtube,  I want to embed it in my webpage,  but as a thumbnail first.  The users selects the video he/she likes then press it to play in the same location the thumbnail exists.
0
Linux Academy Android App Now Supports Chromecast

We have some fantastic news for our Android fans. We’re so excited to announce that the Linux Academy Android app is now available with Chromecast support. That’s right – simply download the latest update of the Linux Academy App and start casting your favorite course videos!

 
LVL 70

Accepted Solution

by:
Jason C. Levine earned 2000 total points
ID: 26325738
Hi hhammash,

The easiest way is to use something like this:

http://videolightbox.com/
0
 
LVL 29

Expert Comment

by:Pravin Asar
ID: 26326226
You can also look at

http://www.wimpyplayer.com/

0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 26326265
Wimpy won't automatically create a thumbnail or a popup though (unless it's changed recently).  In that sense, it's no different from Flowplayer or JW Media Player.  Since the asker is already embedding YouTube stuff, a secondary player skin isn't needed.
0
 
LVL 14

Author Comment

by:hhammash
ID: 26326333
Hi Jason1178,
It seems that videolightbox is the one,  but I am going to use it from inside a Sharepoint page.

I think it should not object,  right?

The code that is generated for the html page,  does it rely on extra files or the whole code is contained within one page?

I will download the free copy and give it a try.

Then come back to you.

Thanks
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 26326369
>> The code that is generated for the html page,  does it rely on extra files or the whole code is contained
>> within one page?

I doubt it will be self-contained.  These lightbox scripts almost always need jquery, but adding a reference to jquery is no big deal.

>> I am going to use it from inside a Sharepoint page. I think it should not object,  right?

Shouldn't matter.  We're dealing with HTML and Javascript and SP won't raise a fuss.
0
 
LVL 14

Author Comment

by:hhammash
ID: 26331400
I will try it tomorrow at work.

I think for SP what I need to do is create a library for the videos and scripts and refer to them from the code.

The only weakness in this application is that you do not have any control on where the video opens.  It popus up in the center of the screen.
0
 
LVL 70

Expert Comment

by:Jason C. Levine
ID: 26346120
>>  It popus up in the center of the screen.

If you dig into the code created, you would be able to located the CSS code that centers everything and change it.  I don't recommend you do this because having the popup as a modal dialog in the center of the screen is sort of the industry standard.
0
 
LVL 14

Author Comment

by:hhammash
ID: 26348180
Thank you Jason
0
 
LVL 14

Author Closing Comment

by:hhammash
ID: 31676627
Great
0

Featured Post

Get proactive database performance tuning online

At Percona’s web store you can order full Percona Database Performance Audit in minutes. Find out the health of your database, and how to improve it. Pay online with a credit card. Improve your database performance now!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Color can increase conversions, create feelings of warmth or even incite people to get behind a cause. If you want your website to really impact site visitors, then it is vital to consider the impact color has on them.
Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
This tutorial walks through the best practices in adding a local business to Google Maps including how to properly search for duplicates, marker placement, and inputing business details. Login to your Google Account, then search for "Google Mapmaker…
The viewer will learn how to dynamically set the form action using jQuery.
Suggested Courses

771 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question