Link to home
Create AccountLog in
Avatar of Raheman M. Abdul
Raheman M. AbdulFlag for United Kingdom of Great Britain and Northern Ireland

asked on

Embed dynamic videos in web page

I want to build a web page with the following requirements :

There are few links displayed on the web page
When I click one of the link, the respective video (which is stored on youtube) is played in a window on the same page.

Can you help me to implement the above please.

I would like to use the code generated by youtube to embed the video into my page.
Its better if the video is played in a media player online. or just a simple embed video is OK.
Thanks in advance
mar
Avatar of RonCraig_101
RonCraig_101
Flag of United States of America image

The article linked by RonCraig_101 is really interesting, but it requires a good level of advanced Flash knowledge, XML, etc.

A little less elegant, but a bit easier way to achieve what you want is using iframes on your HTML page.

<a href="javascript:document.getElementById('video').src='http://www.youtube.com/embed/JW5meKfy3fY';">Asian girl singing</a> <br>
<a href="javascript:document.getElementById('video').src='http://www.youtube.com/embed/obt3suq_BT8';">xmas in NY</a> <br>
<a href="javascript:document.getElementById('video').src='http://www.youtube.com/embed/VIDEO_CODE_HERE';">video name</a> <br>
<IFRAME id="video" src="whatever_you_want" WIDTH=640 HEIGHT=385 frameborder=0></IFRAME>

Open in new window

OBS: change the WIDTH and HEIGHT attributes to the video window dimension you want (one single dimensions for all the videos), and to insert more videos on the list, just add more <A> tags with the youtube video code on the tag.

There is a initial iframe src you can set to anything you want.
Avatar of Raheman M. Abdul

ASKER

@atipico: Can you give the full code please
@marahman3001: That *is* the full code. Just change the "embed/WHATEVER" part for the youtube video codes (the codes that come after "watch?v=" in the video URL.

Example: in this video
http://www.youtube.com/watch?v=JW5meKfy3fY&list=WL

the video code is  "JW5meKfy3fY""

-----

Also, as it is an iframe, there will be a content to be displayed before any video is being played. just change the line

<IFRAME id="video" src="whatever_you_want" WIDTH=640 HEIGHT=385 frameborder=0></IFRAME>

and in the SRC part put the address to the content you want to be displayed before any video is played (it can be anything you want, even on or off your site)
@atipico:  I dont want to display individual video on the website. but when you click on a link it should display in the same video frame when you click other links.
eg.
Link1    
Link2
Link3
Link4
All  the above links when clicked should display video in the same window on the right hand side.
When you say
When I click one of the link, the respective video (which is stored on youtube) is played in a window on the same page.
and then you say
I dont want to display individual video on the website
what do you exactly mean?

If you copy exactly the code I provided and then test it you will see it is exactly what you seem to be wanting (unless I got it wrong).

Can you provide a link to your site to show what you want to achieve? Or provide a picture?
@atipico: can you make a html for me please to test
<html><head><title>iframe test</title></head>
<body>
1.<a href="javascript:document.getElementById('video').src='http://www.youtube.com/embed/JW5meKfy3fY';">Asian girl singing</a> <br>
2.<a href="javascript:document.getElementById('video').src='http://www.youtube.com/embed/obt3suq_BT8';">xmas in NY</a> <br>
3.<a href="javascript:document.getElementById('video').src='http://www.youtube.com/embed/Ht96HJ01SE4';">third video</a> <br>
Click on a video to open it on the window below
<hr>
<IFRAME id="video" src="http://www.colorpicker.com/" WIDTH=640 HEIGHT=385 frameborder=0></IFRAME>
</body></html>

Open in new window

Its trying to open in new page with just a text
Hm... It works fine on Chrome and IE but not in firefox. I'll dig further into it.
I tried in IE 8 and no luck
ASKER CERTIFIED SOLUTION
Avatar of Raheman M. Abdul
Raheman M. Abdul
Flag of United Kingdom of Great Britain and Northern Ireland image

Link to home
membership
Create an account to see this answer
Signing up is free. No credit card required.
Create Account
I have to close the question as i did not get proper answer.