JavaScript

Создание iframe из ютуба средствами js

Как создать iframe в котором будет воспроизводится видео из ютуба? Все это на js
 // Получите элемент, в который вы хотите добавить iframe 
const container = document.getElementById("video-container");

// Создайте элемент iframe
const iframe = document.createElement("iframe");

// Установите источник iframe на URL вставки видео YouTube
iframe.src = "https://www.youtube.com/embed/VIDEO_ID";

// Установите ширину и высоту iframe
iframe.width = "560";
iframe.height = "315";

// Добавьте iframe к элементу контейнера
container.appendChild(iframe);
Замените VIDEO_ID в атрибуте src на фактический ID видео YouTube, которое вы хотите вставить. Идентификатор видео можно найти в URL-адресе видео после параметра v=.
Yamaxa 275 ,
Yamaxa 275 ,
1 133
Лучший ответ
Мендигерей Масалимов Спасибо, а как можно было бы его запустить при клике на отдельную кнопку?
Yamaxa 275 , Вы можете запустить код для создания iframe при нажатии на кнопку, добавив слушатель событий к элементу button. Вот пример того, как можно изменить код для создания iframe при нажатии на кнопку:
HTML
 Play Video 

Yamaxa 275 , продолжение на JS (ибо не помещается в комментарий)

   // Установите источник iframe на URL вставки видео YouTube    

iframe.src = "https://www.youtube.com/embed/VIDEO_ID";



// Установите ширину и высоту iframe

iframe.width = "560";

iframe.height = "315";



// Добавьте iframe к элементу контейнера

container.appendChild(iframe);

});
Мендигерей Масалимов Сейчас посмотрел внимательнее, выдает ошибку, не находит элемент по указанным классам, но прикол в том что когда ввожу в консоли все прекрасно ищется. Копирую строку, снова не работает! Смотрю в консоли, и эта строчка уже не действительна, теперь кнопка ищется только по 3 классам. и так все время!
Для этого не нужен JS. Единственный способ вставки видео с Ютуба - взять готовый код для вставки из окна "поделиться".
Мендигерей Масалимов Пишу userscript. Я уже сделал через js. Но столкнулся с проблемой невозможности запуска видео через js. Почему то не получается найти кнопку по классам...
const container = document.getElementById("video-container");
const iframe = document.createElement("iframe");
iframe.setAttribute("width", "560");
iframe.setAttribute("height", "315");
iframe.setAttribute("src", " https://www.youtube.com/embed/твоя ссылканавидео");
iframe.setAttribute("frameborder", "0");
iframe.setAttribute("allow", "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture");
iframe.setAttribute("allowfullscreen", "");
container.appendChild(iframe);
Илья Чупеев
Илья Чупеев
1 175
Для создания iframe с видео из YouTube на JavaScript, вы можете использовать следующий код: javascript
// Получить элемент, в который нужно вставить iframe var container = document.getElementById('video-container'); // Создать iframe элемент var iframe = document.createElement('iframe'); // Задать атрибуты iframe iframe.setAttribute('src', 'https://www.youtube.com/embed/VIDEO_ID'); iframe.setAttribute('width', '560'); iframe.setAttribute('height', '315'); iframe.setAttribute('frameborder', '0'); iframe.setAttribute('allowfullscreen', ''); // Вставить iframe в контейнер container.appendChild(iframe); Замените "VIDEO_ID" на идентификатор видео из YouTube, который вы хотите воспроизвести. Например, если URL-адрес видео на YouTube выглядит как https://www.youtube.com/watch?v=dQw4w9WgXcQ, то идентификатором видео будет "dQw4w9WgXcQ". Также убедитесь, что у вас есть элемент на странице с идентификатором "video-container", в который будет вставлен iframe. Например: html <div id="video-container"></div> Это простой способ создать iframe с видео из YouTube на JavaScript. Если вы хотите настроить дополнительные параметры, такие как начальное время воспроизведения или скрытие элементов управления, вы можете обратиться к документации YouTube API.
Мендигерей Масалимов Не подскажете как его можно запустить, к примеру отдельной кнопкой? Ибо iframe.play() не работает...