Вставить видео YouTube с треклистом навигации

Question

Я хочу встроить видео YouTube на свой веб-сайт, представляющий собой полноформатный музыкальный альбом, и создать навигацию по треклистам, чтобы пользователь мог щелкать отдельные песни в альбоме.

Я знаю основной способ встраивания iframe на YouTube:

<iframe width="420" height="315" src="https://www.youtube.com/embed/uRDgVEJKx5c" frameborder="0" allowfullscreen></iframe>

Как бы я создал навигацию?

Answer 1

Сначала используйте стандартный код для вставки iframe на YouTube, а затем добавьте атрибут name:

Пример:

<iframe name="iframeYouTube" width="560" height="315" src="https://www.youtube.com/embed/uRDgVEJKx5c" frameborder="0" allowfullscreen=""></iframe>

Затем создайте навигацию на той же странице с глубокими ссылками на определенное время в видео YouTube. Используйте тег привязки, нацеленный на имя iframe, и добавьте несколько параметров строки запроса в URL-адрес для встраивания YouTube:

• начать установить количество секунд в видео
• Автовоспроизведение установлено в true

Пример:

<a target="iframeYouTube" href="https://www.youtube.com/embed/uRDgVEJKx5c?start=672&autoplay=1">Glorious Lion</a>

Посмотрите мой пример CodePen