Question

我正在尝试加载特定的iframe（Youtube视频），具体取决于点击的内容。

<a href="#" class="video"></a>
<a href="#" class="video"></a>
<div class="video-wrapper">
    <iframe src="" id="youtube"></iframe>
</div>

我不完整的JQuery就是这样;

<script>
  $(document).ready(function(){
  $('a.video').click(function() {
   var videoSelect = $(this).attr('href');

  $("#youtube-video").attr
  });
});
</script>

欢迎任何帮助。感谢

Answer 1

HTML： （只是ID会更容易）

<a href="JDglMK9sgIQ" class="video">#1</a>
<a href="LpKyzSxVhk4" class="video">#2</a>

<div class="video-wrapper">
    <iframe id="youtube" width="560" height="315" frameborder="0" allowfullscreen></iframe>
</div>

jQuery：

$('a.video').click(function () {
    var id = $(this).attr('href');
    var src = '//www.youtube.com/embed/'+id;
    $("#youtube").attr('src', src);
    return false;
});

演示： http://jsfiddle.net/tdLnoxmo/

更好（使用数据attr）

HTML：

<a href="#" class="video" data-youtube="JDglMK9sgIQ">#1</a>
<a href="#" class="video" data-youtube="LpKyzSxVhk4">#2</a>

<div class="video-wrapper"></div>

jQuery：

$('[data-youtube]').click(function () {
    var id = $(this).attr('data-youtube');
    var src = '//www.youtube.com/embed/'+id;
    var iframe = '<iframe id="youtube" width="560" height="315" frameborder="0" src="'+src+'" allowfullscreen></iframe>';
    $(".video-wrapper").html(iframe);
    return false;
});

演示： http://jsfiddle.net/l2aelba/tdLnoxmo/75/

Answer 2

我想出了如何自动播放视频（下方）。知道如何为每个链接添加锚点吗？所以...在很长的YT链接列表中，您点击页面底部附近的链接，锚定到页面顶部的iframe，然后自动播放视频？这是自动播放位（+＆＃39;？autoplay = 1＆＃39;）：

$(window).load(function(){
$('a.video').click(function () {
    var id = $(this).attr('href');
    var src = '//www.youtube.com/embed/'+id+'?autoplay=1';
    $("#youtube").attr('src', src);
    return false;

使用jQuery onClick函数加载特定的iframe

2 个答案: