使用jQuery播放链接列表中的第一个youtube嵌入视频

Question

我调用一个循环来生成youtube嵌入视频的链接列表。当我点击任何一个链接时，相关的视频就会在iFrame中打开。但问题是，当我第一次加载页面时，它在iFrame甚至iFrame中都没有显示任何视频。我需要点击一个链接来加载一个视频。我想在加载页面时自动加载列表中的第一个视频。

视频的iFrame：

    <h4 id="videoTitle"></h4>
    <div class="embed-responsive embed-responsive-16by9">
        <iframe id="frame" name="frame" width="560" height="315" src="about:blank" frameborder="0" 
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen>
        </iframe>
    </div>

这是生成视频列表的循环，我使用的是laravel，所以代码是这样的：

@foreach($topic->videos as $video)
    <li>
        <a href="{{ $video->url }}" class="ytLink">Play Video</a>
    </li>
@endforeach

下面是我的jQuery代码：

<script>
    $('.ytLink').on('click', function (e) {
         $('#frame')[0].src = $(this).attr('href') + '?autoplay=1';
         e.preventDefault();
         $('#videoTitle').text($(this).text());
    });
</script>

有没有人可以教我如何自动加载第一个视频？

Answer 1

加载文档时，我触发了您的第一个链接。

我使用$(document).ready()函数让您的代码在文档加载并准备好使用时执行。我把你的代码粘贴到了这个函数里面。在我找到$('.ytLink').eq(0)的第一个链接之后，我在这个元素上使用.trigger('click')。因此，此触发器将在加载文档时运行。

有关.eq()函数的更多信息。

以及有关.ready()函数的更多信息。

$(document).ready(function() {
   $('.ytLink').on('click', function (e) {
         $('#frame')[0].src = $(this).attr('href') + '?autoplay=1';
         e.preventDefault();
         $('#videoTitle').text($(this).text());
    });
  $('.ytLink').eq(0).trigger('click');

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h4 id="videoTitle"></h4>
    <div class="embed-responsive embed-responsive-16by9">
        <iframe id="frame" name="frame" width="560" height="315" src="about:blank" frameborder="0" 
            allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
            allowfullscreen>
        </iframe>
    </div>
	
	
	<li>
        <a href="https://www.youtube.com/watch?v=Vhh_GeBPOhs" class="ytLink">Play Video</a>
    </li>
    <li>
        <a href="https://www.youtube.com/watch?v=Vhh_GeBPOhs" class="ytLink">Play Video</a>
    </li>
    <li>
        <a href="https://www.youtube.com/watch?v=Vhh_GeBPOhs" class="ytLink">Play Video</a>
    </li>

​