Как добавить видео с YouTube, используя собственное превью-изображение?

Существует готовый способ вставлять готовое видео с YouTube в код?
  • 22 ноября 2023 г. 22:49
Ответы на вопрос 2
Да, вы можете вставить видео с YouTube в код, используя собственное превью-изображение. Для этого вам потребуется использовать HTML-код и API-YouTube.

1. Войдите в свою учетную запись Google и перейдите на страницу разработчика YouTube API: https://developers.google.com/youtube/registering_an_application
2. Создайте новое приложение, откройте его и получите API-ключ.
3. Откройте страницу, где вы хотите добавить видео, и добавьте следующий код:

```html
<div id="player"></div>

<script>
  // Загрузка API YouTube
  var tag = document.createElement('script');
  tag.src = "https://www.youtube.com/iframe_api";
  var firstScriptTag = document.getElementsByTagName('script')[0];
  firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

  // Создание плеера после загрузки API
  var player;
  function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
      videoId: 'YOUR_VIDEO_ID',
      playerVars: {
        'autoplay': 0,
        'controls': 1,  // Включение элементов управления плеера
        'rel': 0,  // Отключение рекомендаций после просмотра видео
        'showinfo': 0,  // Отключение информации о видео под плеером
        'modestbranding': 1  // Скрытие логотипа YouTube
      },
      events: {
        'onReady': onPlayerReady
      }
    });
  }

  function onPlayerReady(event) {
    event.target.setVideoId('YOUR_VIDEO_ID');  // Установка ID видео
  }
</script>
```

4. Замените 'YOUR_VIDEO_ID' на фактический идентификатор видео на YouTube, который вы хотите вставить. Вы можете найти этот идентификатор в URL-адресе видео после "v=". Например, в URL-адресе "https://www.youtube.com/watch?v=YOUR_VIDEO_ID" ваш "YOUR_VIDEO_ID" будет идентификатором.

5. Снимите комментарий со строки 'event.target.setVideoId('YOUR_VIDEO_ID');' в функции onPlayerReady, чтобы указать идентификатор видео в качестве предварительного изображения.

6. Наконец, вставьте этот код на свою веб-страницу в соответствующее место.

Обратите внимание, что изображение должно быть доступно публично, поэтому убедитесь, что ваше изображение предоставляется с открытыми правами или находится в публичном доступе.
Убедитесь, что ссылка, которую вы передаете в функцию parseMediaURL, является ссылкой на видео, а не на изображение. В вашем коде есть адрес видео в ссылке, но она не является той ссылкой, которая передается в функцию.
Похожие вопросы