Question

This piece of code works for every browser except IE7. In IE7, the user is redirected to http://www.youtube.com. Oh, and it doesn’t just redirect the frame, the entire page is redirected! Any thoughts? Ideas? Alternate patterns?

Please help me. IE is killing my will to live.

  $('.youtube .cue a').live('click', function(e) {
    e.preventDefault();
    var $this = $(this);
    var $area = $this.parents('.youtube');
    var $caption = $area.find('.videoDescription');
    var $li = $this.parents('li:first');
    var vid = $.trim($(this).attr('href').replace('#', ''));
    var title = $li.find('.title').text();
    var time = $li.find('.time').text();
    var description = $li.find('.description').text();

    var $frame = $('<iframe></iframe>').attr({
      width:595,
      height:350,
      frameborder: 0,
      src: 'http://www.youtube.com/embed/' + vid
    });

    if (!hasFlash) {
      $area.find('.captioned').html('<a href="http://get.adobe.com/flashplayer/" class="no-flash">Please install Flash</a>.');
    }
    else {
      $area.find('.captioned').html('').append($frame);
    }

    $caption.find('.title').html(title);
    $caption.find('.time').html(time);
    $caption.find('.description').html(description);
  });

Answer 1

It looks to me like this line:

var vid = $.trim($(this).attr('href').replace('#', ''));

is the problem. Retrieving the href from the <a> tag is going to return a fully qualified URL (including http:// and domain on the front). Then, in this line, you’re going to add it onto the end of another fully qualified URL:

src: 'http://www.youtube.com/embed/' + vid

That’s going to yield an odd result like this:

http://www.youtube.com/embed/http://www.domain.com/xxxxxx

for the iframe src= attribute which is likely not what you want.

What may be tripping you up is that retrieving the href from an <a href="index.html"> tag retrieves a fully qualified URL, even if the page source only has a relative URL. If you only want the path or filename from that link href, you will have to parse that off.

I’ve verified with a reconstruction of your your HTML and your code that if you give this sort of bad URL to the iFrame, it will redirect the whole page (even in Chrome). Here’s the jsfiddle: http://jsfiddle.net/jfriend00/4P3dh/.

If you hit Run and then click the link that says “Click Me”, it will redirect the whole page because of the bad URL on the iFrame.