Воспроизвести первое встроенное видео YouTube из списка ссылок, используя jQuery

Question

Я звоню на oop, чтобы сгенерировать список ссылок встроенного видео 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>

Это l oop для создания списка видео, Я использую 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>