Как изменить миниатюру встроенного видео с YouTube?

Question

Как изменить миниатюру встроенного видео с YouTube?

12 дек. 2017 г., 19:11:06

Просмотры: 38.2K

Голосов: 3

Когда я встраиваю видео с YouTube на свою страницу, есть ли способ изменить отображаемую миниатюру (скриншот)? У меня нет доступа администратора к данному YouTube видео.

Я бы предпочел решение без использования плагинов, если это возможно. Я нашел эти инструкции, но они не сработали.

cag8f

2K

встраивание youtube

Комментарии

@Nicolai Спасибо за это. Можешь дать ссылку на документацию по шорткоду [video]? Я встраиваю видео просто вставляя URL YouTube на страницу. Затем встроенная функциональность WordPress преобразует это в соответствующий исходный код. У меня было впечатление, что используется шорткод [embed] (хотя я могу ошибаться). В любом случае, что-то, что позволяет установить миниатюру, звучит как то, что мне нужно.

cag8f

12 дек. 2017 г. 19:16:26

Хорошо, спасибо. Я реализовал это и действительно могу изменить стандартную миниатюру. Но это происходит за счёт немного другого видеоплеера (сравнение скриншотов https://imgur.com/a/QVGKL). Шорткод [video] меняет видеоплеер на встроенный плеер WordPress, который не имеет знакомой стилизации YouTube, а также отсутствует ссылка на настройки и ссылка «смотреть на YouTube» (что мне нравится). В идеале, если возможно, я хотел бы оставить всё в плеере YouTube таким же, за исключением миниатюры. Могу ли я сделать это с помощью пользовательского JavaScript?

cag8f

12 дек. 2017 г. 19:36:04

Хорошо, спасибо. Можем ли мы оставить это открытым на день или два, чтобы другие могли прочитать/прокомментировать? Возможно, я был бы открыт для решения через плагин.

cag8f

12 дек. 2017 г. 19:43:52

Все ответы на вопрос

Комментарии

Я реализовал это (страница здесь http://kabultec.org/blog/events/annual-afghan-womens-benefit-dinner-2017/). С этим я действительно заменил миниатюру, которая отображается перед воспроизведением видео. Но когда видео заканчивает проигрываться, оно показывает оригинальную начальную миниатюру — ту самую начальную миниатюру, которую я хочу скрыть (скриншот https://imgur.com/t8N1dPf). Есть идеи, как это исправить? Даже пустой черный экран был бы решением в данном случае. Мотивация для этого упражнения — заменить или скрыть эту конкретную миниатюру везде на сайте.

cag8f

15 дек. 2017 г. 13:45:52

Удаление &rel=0 не помогло, и я не являюсь владельцем этого канала Youtube. О каком именно <div> вы говорите? Я не могу найти элемент с классом ytp-cued-thumbnail-overlay (или подобным).

cag8f

16 дек. 2017 г. 11:37:50

Хорошо. Я искал в исходном коде ytp-cued-thumbnail, но не смог его найти (скриншот: https://imgur.com/POsfj4r). Разве он не должен там отображаться? Или я что-то неправильно понимаю? Можете ли вы отправить мне скриншот, показывающий его присутствие? Дело не в том, что я вам не верю, но это может помочь мне понять, где я ошибаюсь.

cag8f

17 дек. 2017 г. 14:37:11

OK. Этот класс добавляется на страницу при вставке YouTube, поэтому его не было на моей странице, так как я переключился на шорткод [video]. Но это новое решение мне больше нравится — оставить вставку YouTube и изменить превью с помощью JavaScript. Я вернулся к вставке YouTube (http://kabultec.org/dev/blog/events/benefit-dinner-2016/), но у меня проблемы с выбором класса. В частности, при загрузке страницы document.getElementsByClassName("ytp-cued-thumbnail-overlay-image")[0]; возвращает undefined. Но после инспектирования элемента он возвращает нужный класс. Есть мысли?

cag8f

19 дек. 2017 г. 15:23:19

Может быть, стоит задать отдельный вопрос на Stack Overflow?

cag8f

19 дек. 2017 г. 15:23:40

Показать остальные 5 комментариев

Посмотрите это, возможно, это поможет.


<div class="video-responsive"><iframe src="https://www.youtube-nocookie.com/embed/1Cz2Xzm6knM/videoseries?list=PLq-1Cz2Xzm6knM-1Cz2Xzm6knM&amp;rel=0" width="420" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div>


.video-responsive{
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-responsive iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

dig99

9

29 июл. 2020 г. 11:24:24

Nicolai Grossherr 18.9K · Accepted Answer · 2017-12-12T19:31:08Z

Шорткод [video] может использоваться с параметром src, содержащим URL-адрес видео с YouTube. Для установки изображения-заставки (превью) используйте параметр poster, который также удобно настраивается через графический интерфейс. В итоге код должен выглядеть примерно как в примере ниже.

[video src="https://www.youtube.com/watch?v=XYZ" poster="http://example.com/wp-content/uploads/2017/01/example.jpg"]

Nicolai Grossherr

18.9K

12 дек. 2017 г. 19:31:08