Как вставить видео с ютуба с локальным превью?
Есть такой готовый вариант, чтобы вставлять в код готовое видео с ютуба.
Логика скрипта такая что из за кода превьюшки скрипт работает, а хотелось бы чтобы просто висело фоновое изображение локальное.
<div class="video__wrapper"> <div class="video"> <a class="video__link" href="https://youtu.be/neHA4MJwpnY"> <picture> <source srcset="https://i.ytimg.com/vi_webp/pdIstjttY_M/maxresdefault.webp" type="image/webp"> <img class="video__media" src="https://i.ytimg.com/vi/pdIstjttY_M/maxresdefault.jpg" alt="1. Пилот, разборы, ответы и лайвы"> </picture> </a> <button class="video__button" aria-label="Запустить видео"> <svg width="68" height="48" viewBox="0 0 68 48"> <path class="video__button-shape" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"> </path> <path class="video__button-icon" d="M 45,24 27,14 27,34"></path> </svg> </button> </div> </div> |
<div class="video__wrapper"> <div class="video"> <a class="video__link" href="https://youtu.be/neHA4MJwpnY"> <picture> <source srcset="https://i.ytimg.com/vi_webp/pdIstjttY_M/maxresdefault.webp" type="image/webp"> <img class="video__media" src="https://i.ytimg.com/vi/pdIstjttY_M/maxresdefault.jpg" alt="1. Пилот, разборы, ответы и лайвы"> </picture> </a> <button class="video__button" aria-label="Запустить видео"> <svg width="68" height="48" viewBox="0 0 68 48"> <path class="video__button-shape" d="M66.52,7.74c-0.78-2.93-2.49-5.41-5.42-6.19C55.79,.13,34,0,34,0S12.21,.13,6.9,1.55 C3.97,2.33,2.27,4.81,1.48,7.74C0.06,13.05,0,24,0,24s0.06,10.95,1.48,16.26c0.78,2.93,2.49,5.41,5.42,6.19 C12.21,47.87,34,48,34,48s21.79-0.13,27.1-1.55c2.93-0.78,4.64-3.26,5.42-6.19C67.94,34.95,68,24,68,24S67.94,13.05,66.52,7.74z"> </path> <path class="video__button-icon" d="M 45,24 27,14 27,34"></path> </svg> </button> </div> </div>
.video { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; background-color: #000000; &__wrapper{ margin: 0; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } &__link, &__media{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } &__media{ border: none; } &__button{ position: absolute; top: 50%; left: 50%; z-index: 1; display: none; padding: 0; width: 68px; height: 48px; border: none; background-color: transparent; transform: translate(-50%, -50%); cursor: pointer; &:focus{ outline: none; } &-shape{ fill: #212121; fill-opacity: 0.8; } &-icon{ fill: #ffffff; } } } .video:hover .video__button-shape, .video__button:focus .video__button-shape { fill: #ff0000; fill-opacity: 1; } /* Enabled */ .video--enabled { cursor: pointer; } .video--enabled .video__button { display: block; } |
.video { position: relative; width: 100%; height: 0; padding-bottom: 56.25%; background-color: #000000; &__wrapper{ margin: 0; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px; } &__link, &__media{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } &__media{ border: none; } &__button{ position: absolute; top: 50%; left: 50%; z-index: 1; display: none; padding: 0; width: 68px; height: 48px; border: none; background-color: transparent; transform: translate(-50%, -50%); cursor: pointer; &:focus{ outline: none; } &-shape{ fill: #212121; fill-opacity: 0.8; } &-icon{ fill: #ffffff; } } } .video:hover .video__button-shape, .video__button:focus .video__button-shape { fill: #ff0000; fill-opacity: 1; } /* Enabled */ .video--enabled { cursor: pointer; } .video--enabled .video__button { display: block; }
function findVideos() { let videos = document.querySelectorAll('.video'); for (let i = 0; i < videos.length; i++) { setupVideo(videos[i]); } } function setupVideo(video) { let link = video.querySelector('.video__link'); let media = video.querySelector('.video__media'); let button = video.querySelector('.video__button'); let id = parseMediaURL(media); video.addEventListener('click', () => { let iframe = createIframe(id); link.remove(); button.remove(); video.appendChild(iframe); }); link.removeAttribute('href'); video.classList.add('video--enabled'); } function parseMediaURL(media) { let regexp = /https://i.ytimg.com/vi/([a-zA-Z0-9_-]+)/maxresdefault.jpg/i; let url = media.src; let match = url.match(regexp); return match[1]; } function createIframe(id) { let iframe = document.createElement('iframe'); iframe.setAttribute('allowfullscreen', ''); iframe.setAttribute('allow', 'autoplay'); iframe.setAttribute('src', generateURL(id)); iframe.classList.add('video__media'); return iframe; } function generateURL(id) { let query = '?rel=0&showinfo=0&autoplay=1'; return 'https://www.youtube.com/embed/' + id + query; } findVideos(); |
function findVideos() { let videos = document.querySelectorAll('.video'); for (let i = 0; i < videos.length; i++) { setupVideo(videos[i]); } } function setupVideo(video) { let link = video.querySelector('.video__link'); let media = video.querySelector('.video__media'); let button = video.querySelector('.video__button'); let id = parseMediaURL(media); video.addEventListener('click', () => { let iframe = createIframe(id); link.remove(); button.remove(); video.appendChild(iframe); }); link.removeAttribute('href'); video.classList.add('video--enabled'); } function parseMediaURL(media) { let regexp = /https://i.ytimg.com/vi/([a-zA-Z0-9_-]+)/maxresdefault.jpg/i; let url = media.src; let match = url.match(regexp); return match[1]; } function createIframe(id) { let iframe = document.createElement('iframe'); iframe.setAttribute('allowfullscreen', ''); iframe.setAttribute('allow', 'autoplay'); iframe.setAttribute('src', generateURL(id)); iframe.classList.add('video__media'); return iframe; } function generateURL(id) { let query = '?rel=0&showinfo=0&autoplay=1'; return 'https://www.youtube.com/embed/' + id + query; } findVideos();
Дополнительно:
У вас прямо в коде есть адрес видео в ссылке (только она почему-то не другое видео ведёт). Однако, вы в функцию parseMediaURL передаёте картинку, а не эту ссылку.
Соответственно, как только вы будете брать URL видео из нужного места, а не из картинки, путь до картинки может стать любым.
- Я чуть изменил функцию, но хотелось бы чтобы видео прямо на сайте открывалось
function findVideos() { let videos = document.querySelectorAll(".video"); for (let i = 0; i < videos.length; i++) { setupVideo(videos[i]); } } function setupVideo(video) { let link = video.querySelector(".video__link"); let media = video.querySelector(".video__media"); let button = video.querySelector(".video__button"); let id = link.getAttribute("href"); video.addEventListener("click", () => { let iframe = createIframe(id); link.remove(); button.remove(); video.appendChild(iframe); }); link.removeAttribute("href"); video.classList.add("video--enabled"); } function createIframe(id) { let iframe = document.createElement("iframe"); iframe.setAttribute("allowfullscreen", ""); iframe.setAttribute("allow", "autoplay"); iframe.setAttribute("src", generateURL(id)); iframe.classList.add("video__media"); return iframe; } function generateURL(id) { return id; } findVideos();
function findVideos() { let videos = document.querySelectorAll(".video"); for (let i = 0; i < videos.length; i++) { setupVideo(videos[i]); } } function setupVideo(video) { let link = video.querySelector(".video__link"); let media = video.querySelector(".video__media"); let button = video.querySelector(".video__button"); let id = link.getAttribute("href"); video.addEventListener("click", () => { let iframe = createIframe(id); link.remove(); button.remove(); video.appendChild(iframe); }); link.removeAttribute("href"); video.classList.add("video--enabled"); } function createIframe(id) { let iframe = document.createElement("iframe"); iframe.setAttribute("allowfullscreen", ""); iframe.setAttribute("allow", "autoplay"); iframe.setAttribute("src", generateURL(id)); iframe.classList.add("video__media"); return iframe; } function generateURL(id) { return id; } findVideos();
Опишите проблему, и специалист поможет с настройкой, исправлением ошибки или доработкой сайта. Подберём понятный план работ без лишней переписки.
Пока нет других ответов. Будьте первым, кто поможет автору.
Ответить на вопрос
Для вставки видео с YouTube с локальным превью на вашем сайте вы можете использовать следующий подход:
1. Сначала вам нужно загрузить видео на YouTube и получить код встраивания. Для этого откройте видео на YouTube, нажмите на кнопку "Поделиться" под видео, затем выберите "Встроить". Скопируйте код встраивания.
2. Далее вам нужно скачать превью-изображение видео с YouTube. Для этого откройте видео на YouTube, щелкните правой кнопкой мыши на картинке предварительного просмотра видео и выберите "Сохранить изображение как...". Сохраните изображение на вашем компьютере.
3. Теперь создайте HTML-код для вставки видео на вашем сайте. Ниже приведен пример кода:
<div> <img src="путь_к_превью_изображению.jpg" alt="Превью видео"> </div><div> <img src="путь_к_превью_изображению.jpg" alt="Превью видео"> </div>
4. Замените "путь_к_превью_изображению.jpg" на путь к сохраненному превью-изображению, "ссылка_на_видео_на_YouTube" на скопированный код встраивания видео.
5. Вставьте этот код на ваш сайт в нужное место, где вы хотите отображать видео с локальным превью.
Теперь у вас должно быть видео с локальным превью на вашем сайте. Не забудьте проверить, что видео корректно отображается и воспроизводится на вашей странице.