업데이트 유튜브 iframe

Question

jQuery를 사용하여 YouTube iframe의 src 특성을 동적으로 업데이트하려고합니다. 여기 내 HTML입니다 :

<iframe width="480" height="360" src="" frameborder="0" allowfullscreen></iframe> 


<ul>   
<li>Reading comprehension. <span> 
http://www.youtube.com/embed/O9AuuYOdCGc?rel=0</span> 
</li> 
</ul> 

그리고 자바 스크립트

$('.manipulated li').click(function(e) { 
    var source = $(this).children('span').html(); 
    $('iframe').attr('src',source); 
}); 

목표는 내가 리 항목을 클릭 한 후, iframe이의 소스가 업데이트 될 것이며, 사용자가 서로 다른 클립을 재생하는 것입니다 같은 iframe.

아이디어가 잘못되었거나 잘못되었습니다. 어떻게 수행 할 수 있습니까?

Answer 1

JQuery에서는 .html();을 사용할 때 태그가 포함되어 있습니다. 이 경우 URL 만이 아닌 iframe의 소스를 <span>http://www.youtube.com/embed/O9AuuYOdCGc?rel=0</span>으로 설정합니다. 대신 사용

$('.manipulated li').click(function(e) { 
    var source = $(this).children('span').text(); 
    $('iframe').attr('src',source); 
}); 

Answer 2

는 iframe이 어떤 자바 스크립트 1. 추가 ID없이 할 수있는 방법을 알아 낸 : 대신 스팬의 2, 리튬에 태그를 추가를, 유튜브 링크 3 동일한 href 속성으로 . 목표 태그를 iframe에 넣으십시오.

<iframe name="testClip" id="testClip" width="480" height="360" src="http://www.youtube.com/embed/" frameborder="0" allowfullscreen></iframe> 

<ul> 
<li> 
<a href="http://www.youtube.com/embed/O9AuuYOdCGc?rel=0" target="testClip">Reading comprehension.</a> 
</li> 
</ul> 

이 경우 iframe은 자동으로 업데이트됩니다.