jQuery - On Click заменяет контент iFrame новым контентом - PullRequest
Новая
       7

jQuery - On Click заменяет контент iFrame новым контентом

1 голос
/ 08 апреля 2011

Попытка выяснить лучший способ сделать это. У меня есть основной видеоплеер, тянущий видео от Vimeo. Под этим основным игроком находятся эскизы других видео. Когда пользователь нажимает на миниатюру, я хочу, чтобы это миниатюрное видео заняло место основного видео.

Все вставки Vimeo основаны на iFrame. Я не уверен, стоит ли мне заменять весь iFrame или только URL-адрес и т. Д. Кроме того, разница в размере между основным и миниатюрами; не уверен, будет ли это перенесено автоматически или код Vimeo будет достаточно умен для изменения размера. И может ли щелчок Jquery переопределить щелчок, который миниатюра обычно ожидает для воспроизведения небольшого видео?

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>

Этот jQuery полностью не протестирован и сделан на месте, но думал что-то вроде ... 

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

1 Ответ

3 голосов
/ 08 апреля 2011

Вы должны просто заменить файл src вместо замены всего iframe.Если вы заменяете весь iframe, вам нужно настроить атрибут списка щелчков.

Это то, что я имею в виду: 

<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;
})

Если вы идете с другимНа маршруте вам нужно будет отрегулировать ширину и высоту: 

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