0

I am going to create a Iframe which must update its contents dynamically (through the src attribute - The Iframe will change its location every time a different button is clicked) to play different youtube videos that my company has created. The problem is that I saw that you can use jquery to achieve this. I am oblivious to jquery at the moment, but will take time to learn it. For now, I need an answer. How do I use Jquery (or any alternative browser friendly method ) to Change the src Attribute of my Iframe?

<script runat="server"> </script> <div style="margin-left:auto;margin-right:auto"> <table style="width: 960px" cellpadding="0px" cellspacing="0px"> <tr> <td rowspan="6"> <iframe title="YouTube video player" width="480" height="390" src="http://www.youtube.com/embed/JZOxqVl5oP4" frameborder="0" allowfullscreen id="VideoPlayer"></iframe> </td> <td style="Width: 130px"> <img width="130px" src="./Images/Video_Logos/l_absa.gif" /> </td> ...

Note that there are 10 buttons. The buttons are images, and I was planning to call different "Methods" for different videos to play.

I know about javascript's Document.GetElementById("VideoPlayer").SetAttribute("src","NEW LOCATION") within a function, but , lets face it. IE6 + 7 sucks.

Improve this question
3
  • Short answer: don't use an iframe =) Commented Apr 18, 2011 at 10:01
  • Because if there is a c# answer, I can also understand it :) im still a student though Commented Apr 18, 2011 at 10:05
  • hotdesign.com/seybold Commented Apr 18, 2011 at 10:08

2 Answers 2

Reset to default
2

Just use a link. No need to mess around with JavaScript.

You will need to give the frame a name, that is how links target frames.

<a href="http://youtube.com/etc/etc" target="name_of_frame"> <img width="130" src="./Images/Video_Logos/l_absa.gif" alt="something" /> </a>

The width attribute takes an integer value (or an integer followed by a % character), not a CSS length. Get rid of the px.

The alt attribute on <img> elements is mandatory (even in HTML 5)

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

<a href="google.com" target="VideoPlayer" /> <img width="130px" src="./Images/Video_Logos/l_absa.gif" alt="absa" /></a> This is supposed to target my Iframe, but what it does is open the page in a new browser. Why does it do that?
Nevermind XD had the ID= attribute in my Iframe , instead of Name=
1

From the answer given in:

How do I dynamically change the content in an iframe using jquery?

<html> <head> <script type="text/javascript" src="jquery.js"></script> <script> $(document).ready(function(){ var locations = ["http://webPage1.com", "http://webPage2.com"]; var iframe = $('#frame'); $(iframe).attr('src', locations[1]); }); </script> </head> <body> <iframe id="frame"></iframe> </body> </html>

I would recommend not using an iFrame to play the YouTube, take a look at the Javascript Youtube API:

http://code.google.com/apis/youtube/js_api_reference.html

Improve this answer

3 Comments

Thanks. I am very time pressed at the moment, must have my site up in 3 hours. Does this method take very long to set up?
@Eon, never used it but seen it in use. If it is going to take 3 hours do whatever and probably don't risk a new technique, then put it on a to do list to upgrade later.
Something to improve on! thanks! Got the answer above though , from @David Dorward

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.