YouTube встроенное видео: установить другой эскиз - PullRequest
Новая
       24

YouTube встроенное видео: установить другой эскиз

35 голосов
/ 26 августа 2011

Я хочу добавить видео с YouTube, которое не мое (поэтому я не могу изменить его на YouTube).Видео имеет миниатюру, которая не является репрезентативной для видео (я имею в виду исходный кадр, который отображается при вставке видео, показанного до того, как пользователь его воспроизводит).

Есть ли способ установить время стоп-кадра, например, я попытался передать ?s=XXX, но это не работает.Или другой способ, который изначально присутствует на YouTube?

Ответы [ 11 ]

25 голосов
/ 11 апреля 2013

Есть хороший обходной путь для этого на форумах sitepoint : 

<div onclick="this.nextElementSibling.style.display='block'; this.style.display='none'">
   <img src="my_thumbnail.png" style="cursor:pointer" />
</div>
<div style="display:none">
    <!-- Embed code here -->
</div>

Примечание. Чтобы избежать двойного щелчка для воспроизведения видео, используйте autoplay=1 в коде для встраивания видео. Воспроизведение начнется, когда отобразится второй div.

11 голосов
/ 26 августа 2011

Нет.У большинства видео на YouTube есть только один предварительно созданный эскиз плаката (480x360).У них обычно есть несколько других уменьшенных изображений (120x90).Таким образом, даже если бы был параметр встраивания для использования альтернативного изображения плаката (которого нет), его результат был бы неприемлемым.

Теоретически вы можете использовать API-интерфейс проигрывателя для поиска видео в любом месте, где хотите, но это будет серьезным взломом для незначительного результата.

4 голосов
/ 19 мая 2014

Ответы у меня не сработали.Возможно, они устарели.

В любом случае, нашёл этот сайт, который делает всю работу за вас и даже не дает вам необходимости читать непонятную, как обычно, документацию Google: http://www.classynemesis.com/projects/ytembed/

3 голосов
/ 19 мая 2015

Просто скопируйте и вставьте код в файл HTML. и наслаждайтесь счастливым кодированием. Использование Youtube API для управления миниатюрами встроенного видео YouTube. 

<!DOCTYPE html>
<html>
<body>
    <script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
    <script>
        var tag = document.createElement('script');

        tag.src = "https://www.youtube.com/iframe_api";
        var firstScriptTag = document.getElementsByTagName('script')[0];
        firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

        var player;
        function onYouTubeIframeAPIReady() {
            player = new YT.Player('player', {
                height: '390',
                width: '640',
                videoId: 'M7lc1UVf-VE',
                events: {
                    'onReady': onPlayerReady,
                }
            });
        }

        function onPlayerReady(event) {
            $('#play_vid').click(function() {
                event.target.playVideo();
            });
        }

        $(document).ready(function() {
            $('#player').hide();
            $('#play_vid').click(function() {
                $('#player').show();
                $('#play_vid').hide();
            });
        });
    </script>

    <div id="player"></div>
    <img id="play_vid" src="YOUR_IMAGE_PATH" />
</body>
</html>
2 голосов
/ 30 октября 2013

Лучше всего использовать учебник на http://orangecountycustomwebsitedesign.com/change-the-youtube-embed-image-to-custom-image/#comment-7289.. Это позволит избежать двойного щелчка, а видео YouTube не будет автоматически воспроизводиться за вашим изображением до его нажатия.

Не подключайте код для встраивания YouTube, как это дает YT (YouTube) (вы можете попробовать, но это будет сложно) ... вместо этого просто замените исходный код из кода встраивания вашего видео до "& autoplay = 1 "(оставьте все как есть).

например.

Исходный код YT дает: 

`<object width="420" height="315"><param name="movie" value="//www.youtube.com/v/5mEymdGuEJk?hl=en_US&amp;version=3"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="//www.youtube.com/v/5mEymdGuEJkhl=en_US&amp;version=3" type="application/x-shockwave-flash" width="420" height="315" allowscriptaccess="always" allowfullscreen="true"></embed></object>`

Код, используемый в учебнике с тем жеYT src: 

`<object width="420" height="315" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0"><param name="allowFullScreen" value="true" /><param name="allowscriptaccess"value="always" /><param name="src" value="http://www.youtube.com/v/5mEymdGuEJk?version=3&amp;hl=en_US&amp;autoplay=1" /><param name="allowfullscreen" value="true" /><embed width="420" height="315" type="application/x-shockwave-flash" src="http://www.youtube.com/v/5mEymdGuEJk?version=3&amp;hl=en_US&amp;autoplay=1" allowFullScreen="true" allowscriptaccess="always" allowfullscreen="true" /></object>`

Кроме этого, просто замените источник img и путь на свой собственный, и вуаля!

1 голос
/ 25 апреля 2018

Это решение будет воспроизводить видео при нажатии.Вам нужно отредактировать свою фотографию, чтобы добавить изображение кнопки самостоятельно.

Вам понадобится URL-адрес вашей фотографии и идентификатор видео YouTube.Идентификатор видео YouTube является частью URL после параметра v=, поэтому для https://www.youtube.com/watch?v=DODLEX4zzLQ идентификатор будет DODLEX4zzLQ. 

<div width="560px" height="315px" style="position: static; clear: both; width: 560px; height: 315px;">&nbsp;<div style="position: relative"><img id="vidimg" width="560px" height="315px" src="URL_TO_PICTURE" style="position: absolute; top: 0; left: 0; cursor: pointer; pointer-events: none; z-index: 2;" /><iframe id="unlocked-video" style="position: absolute; top: 0; left: 0; z-index: 1;" src="https://www.youtube.com/embed/YOUTUBE_VIDEO_ID" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe></div></div>
<script type="application/javascript">
  // Adapted from https://stackoverflow.com/a/32138108
  var monitor = setInterval(function(){
    var elem = document.activeElement;
    if(elem && elem.id == 'unlocked-video'){
      document.getElementById('vidimg').style.display='none';
      clearInterval(monitor);
    }
  }, 100);
</script>

Обязательно замените URL_TO_PICTURE и YOUTUBE_VIDEO_ID вприведенный выше фрагмент.

Чтобы прояснить, что здесь происходит, это отображает изображение поверх видео, но позволяет кликам проходить через изображение.Сценарий отслеживает клики в видеофрейме, а затем скрывает изображение в случае щелчка.Вам может не понадобиться float: clear.

Я не сравнивал это с другими ответами здесь, но это то, что я использовал.

1 голос
/ 08 марта 2017

Этот инструмент дал мне следующие результаты, которые помогают мне выполнить задачу, как следующий код. 

<div onclick="play();" id="vidwrap" style="height:315px;width:560px;background: black url('http://example.com/image.jpg') no-repeat center;overflow:hidden;cursor:pointer;"></div>
<script type="text/javascript">
    function play(){
        document.getElementById('vidwrap').innerHTML = '<iframe width="560" height="315" src="http://www.youtube.com/embed/xxxxxxxxx?autoplay=1" frameborder="0"></iframe>';
    }
</script>
1 голос
/ 14 января 2014

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

Это решение работало для меня, за исключением того, что я заменил 

<a class="introVid" href="#video">Watch the video</a></p>

с 

<a class="introVid" href="#video"><img src="images/NEWTHUMB.jpg" style="cursor:pointer" /></a>

чтобы вместо текстовой ссылки использовался мой эскиз.

0 голосов
/ 06 августа 2018

Это решение основано на HTML и CSS с использованием z-index и hover, которое работает, если JS отключен или видео не ваше (поскольку вы можете добавить миниатюру на YouTube). 

<style>
.videoWrapper {
  position: relative;
  padding-bottom: 56.25%;
}
.videoWrapper .video-modal-poster img {
  position: absolute;
  width: 100%;
  height: 100%;
  top: 0;
  left: 0;
  z-index: 10;
}
.videoWrapper .video-modal-poster:hover img {
  z-index:0;
}
.videoWrapper iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}
</style>
<div class="videoWrapper">
  <a href="#" class="video-modal-poster">
    <img alt="" src="" width="353" height="199" />
    <iframe width="353" height="199" src="https://www.youtube.com/embed/" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
  </a>
</div>
0 голосов
/ 20 февраля 2018

С помощью jQuery возможно, это зависит от времени загрузки вашего сайта, вы можете настроить время ожидания. Это может быть ваше собственное изображение или вы можете использовать изображение на YouTube maxres1.jpg, maxres2.jpg или maxres3.jpg 

var newImage = 'http://i.ytimg.com/vi/[Video_ID]/maxres1.jpg';
window.setTimeout(function() {
jQuery('div > div.video-container-thumb > div > a > img').attr('src',newImage );
}, 300);
Страница:
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...