CODEWITHSUNDEEP
javascriptjqueryhtmlcss
user3561266
user3561266

Reputation: 1

Swapping iframe src to change videos within it

I am trying to make a video menu with an iframe and list of videos in the right side that are a tags that will make the content of the iframe change as they are being click. My solution works on chrome but fails on mozila and IE.

Is there anything that i should do using jquery?

i have try to target the ID of "mainvideo" but it does not work on other browsers other than google chrome

thank you very much

Upvotes: 0

Views: 394

Answers (2)

dkasipovic
dkasipovic

Reputation: 6120

Actually, unless really required, you don't really need javascript for this. People often overlook that <iframe> is just a frame, and thus can be targeted by target attribute. Here is an example

<iframe width="500" height="500" src="about:blank" name="testframe"></iframe>

<a href="http://test.com" target="testframe">Test</a>
<a href="http://qwerty.com" target="testframe">Qwerty</a>

See it in action here: http://jsfiddle.net/LLnEU/

Upvotes: 1

Milan and Friends
Milan and Friends

Reputation: 5610

Here's a quick example and here's a FIDDLE tested in latest Chrome, Firefox & IE.

<ul>
  <li data-href="http://youtube.com/embed/XzbdY_rPtjw">Video 1</li>
  <li data-href="http://youtube.com/embed/qr3dWscslo8">Video 2</li>
  <li data-href="#">Video 3</li>
  <li data-href="#">Video 4</li>
  <li data-href="#">Video 5</li>
</ul>

<iframe src="http://youtube.com/embed/XzbdY_rPtjw"></iframe>

iframe {
  width: 460px;
  height: 300px;
  border: 1px solid #eee;
}
ul {
  list-style: none;
}
li {
  display: inline-block;
  margin: 0 10px;
  cursor: pointer;
}
li:hover {
  color: #666;
}

(function($) {
  $('ul li').click(function() {
    $('iframe').attr('src',$(this).data('href')); 
  });
})(jQuery);

Upvotes: 1

Related Questions