jQuery - On Click replace iFrame content with new content

Question

Trying to figure out the best way to do this. I have a main video player pulling in a video from Vimeo. Underneath this main player is thumbnails of other videos. When the user clicks on a thumbnail I want it to make that thumbnail video take the place of the main video.

Vimeo embeds are all iFrame based. I'm not sure if I should be replacing the whole iFrame, or just the URL etc. Also the size difference between the main on and the thumbnail; not sure if that will get carried across automatically or the Vimeo code will be clever enough to resize. And can the Jquery click override the click the thumbnail usually expects to play the small video?

HTML

<div class="blogPlayer">
    <iframe src="#" width="528" height="297" frameborder="0"></iframe>
</div>

<ul class="blogThumbnails>
    <li><iframe src="#" width="160" height="90" frameborder="0"></iframe></li>
    <li><iframe src="#" width="160" height="90" frameborder="0"></iframe></li>
    <li><iframe src="#" width="160" height="90" frameborder="0"></iframe></li>
</ul>

This jQuery is completely untested and done on the spot, but was thinking something along the lines of...

$('.blogThumbnails li').click(function(){
   var video = $(this).html();
   $('.blogPlayer').replaceWith('video');
})

nolabel · Accepted Answer · 2011-04-08 17:45:00Z

3

You should just replace the src file instead of replacing the whole iframe. If you are replacing the whole iframe then you'll need to adjust the attribute of the clicked list.

This is what I have in mind:

<div>
      <iframe src="#" id="blogPlayer" width="528" height="297" frameborder="0"></iframe>
</div>

$('.blogThumbnails li').click(function(){
   var url = $(this).attr('src');
   $('#blogPlayer).attr('src', url);
   return false;
})

If you go with the other route you'll need to adjust the width and height:

$('.blogThumbnails li').click(function(){
   var video = $(this).html();
   $('.blogPlayer')
          .replaceWith(video)
          .attr({
                  width: '528',
                  height: '297'
          });
   return false;
})

edited Apr 8, 2011 at 17:45

answered Apr 8, 2011 at 15:57

nolabel

1,1574 gold badges18 silver badges26 bronze badges

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

7 Comments

Code Maverick Over a year ago

Shouldn't you do .replaceWith(video) since video is a variable?

Code Maverick Over a year ago

Shouldn't you do .attr({ width: '528', height: '297'})? Not to mention if you did use your style, you have a , after your ;.

nolabel Over a year ago

Thanks Scott. I did it on the fly without really thinking it through! I should rewrite the codes in an editor next time.

Code Maverick Over a year ago

@nolabel - Haha, no worries. I do the same. I have to look over it like 10 times and there's always something I missed.

Yammi Over a year ago

Thanks, I think your idea of just replacing the URL is best, however there are 2 points. Firstly, how can my click override the Vimeo player thumbnail just playing the actually clip? Secondly, when the page has loaded the iframe actually has a few src attributes for the Flash player etc, how could I be sure it's getting the correct src attribute?

|

Collectives™ on Stack Overflow

jQuery - On Click replace iFrame content with new content

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related