Wideo osadzone na YouTube: Ustaw inną miniaturę

Question

Wideo osadzone na YouTube: Ustaw inną miniaturę

Chcę osadzić film z YouTube, który nie jest mój (więc nie mogę go zmienić na YouTube). Film ma miniaturę, która nie jest reprezentatywna dla filmu (odnoszę się do początkowego nadal, który jest wyświetlany podczas osadzania wideo, pokazywany przed odtwarzaniem go przez użytkownika).

Czy Jest jakiś sposób, aby ustawić czas destylacji, na przykład próbowałem przejść ?s=XXX ale to nie działa. Lub inny sposób, który pochodzi natywnie z YouTube?

27

youtube video

Author: Eric Leschinski, 2011-08-26

Source

11 answers

Na forach sitepoint można znaleźć dobre obejście tego problemu:

<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>

Uwaga: Aby uniknąć dwukrotnego kliknięcia, aby odtworzyć wideo, użyj autoplay=1 w kodzie osadzania wideo. Rozpocznie odtwarzanie, gdy zostanie wyświetlony drugi div.

21

Author: waldyrious,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-04-12 11:54:13

Odpowiedzi mi nie pasowały. Może były przestarzałe.

W każdym razie, znalazłem tę stronę, która wykonuje całą robotę za Ciebie, a nawet uniemożliwia czytanie niejasnej jak zwykle dokumentacji google: http://www.classynemesis.com/projects/ytembed/

5

Author: Augustin Riedinger,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2014-05-19 10:06:49

Wystarczy skopiować i wkleić kod do pliku HTML. i ciesz się szczęśliwym kodowaniem. Korzystanie z interfejsu API Youtube do zarządzania miniaturami osadzonego wideo 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>

3

Author: Muhammad Azeem,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2015-05-19 11:46:23

Najlepiej byłoby skorzystać z samouczka na http://orangecountycustomwebsitedesign.com/change-the-youtube-embed-image-to-custom-image/#comment-7289. Zapewni to, że nie ma podwójnego klikania i że film YouTube nie odtwarza się automatycznie za obrazem przed kliknięciem.

Nie podłączaj kodu embed YouTube jak daje go YT (YouTube) (możesz spróbować, ale będzie ganky)...zamiast tego po prostu zamień źródło z kodu osadzania wideo na "&autoplay=1 " (zostaw to na końcu tak, jak jest).

Np.)

Oryginalny kod yt daje:

`<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>`

Kod użyty w tutorialu z tym samym 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>`

Poza tym, po prostu zamień źródło i ścieżkę img na własne, i voila!

1

Author: user2938361,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2013-10-30 17:15:19

Miałem problem z autoplay ' em z rozwiązania waldira... używając autoodtwarzania, film był odtwarzany po załadowaniu strony, a nie po wyświetleniu div.

To rozwiązanie działało dla mnie z wyjątkiem tego, że wymieniłem

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

Z

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

Aby zamiast linku tekstowego użyła mojej miniatury.

1

Author: Makean,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-05-23 12:26:32

To narzędzie dało mi następujące wyniki, które pomagają mi osiągnąć zadanie w następujący kod.

<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

Author: Janith Chinthana,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2017-03-08 13:45:37

Korzystając z koncepcji z odpowiedzi waldyriousa, stworzyłem następujące rozwiązanie, które również rozwiązuje problem odtwarzania wideo za obrazem na karcie przywracanie lub za pomocą przycisku Wstecz przeglądarki, aby wrócić do strony z filmem.

HTML

<div class="js-video-lead">
  <img class="hide" src="link/to/lead/image.jpg" />
  <iframe frameborder="0" height="240" src="https://www.youtube.com/embed/<code here>" width="426"></iframe>
</div>

Klasa "hide" pochodzi z Bootstrap i po prostu stosuje display: none;, aby obrazek nie był widoczny podczas ładowania strony, jeśli JavaScript jest wyłączony.

JavaScript

function video_lead_play_state(element, active)
{
    var $active = $(element).closest(".js-video-lead").find(".btn-play-active");
    var $default = $(element).closest(".js-video-lead").find(".btn-play-default");

    if (active) {
        $active.show();
        $default.hide();
    } else {
        $active.hide();
        $default.show();
    }
}


$(document).ready(function () {
    // hide the videos and show the images
    var $videos = $(".js-video-lead iframe");
    $videos.hide();
    $(".js-video-lead > img").not(".btn-play").show();

    // position the video holders
    $(".js-video-lead").css("position", "relative");

    // prevent autoplay on load and add the play button
    $videos.each(function (index, video) {
        var $video = $(video);

        // prevent autoplay due to normal navigation
        var url = $video.attr("src");
        if (url.indexOf("&autoplay") > -1) {
            url = url.replace("&autoplay=1", "");
        } else {
            url = url.replace("?autoplay=1", "");
        }
        $video.attr("src", url).removeClass(
            "js-video-lead-autoplay"
        );

        // add and position the play button
        var top = parseInt(parseFloat($video.css("height")) / 2) - 15;
        var left = parseInt(parseFloat($video.css("width")) / 2) - 21;
        var $btn_default = $("<img />").attr("src", "play-default.png").css({
            "position": "absolute",
            "top": top + "px",
            "left": left + "px",
            "z-index": 100
        }).addClass("btn-play btn-play-default");
        var $btn_active = $("<img />").attr("src", "play-active.png").css({
            "display": "none",
            "position": "absolute",
            "top": top + "px",
            "left": left + "px",
            "z-index": 110
        }).addClass("btn-play btn-play-active");
        $(".js-video-lead").append($btn_default).append($btn_active);
    });


    $(".js-video-lead img").on("click", function (event) {
        var $holder = $(this).closest(".js-video-lead");
        var $video = $holder.find("iframe");
        var url = $video.attr("src");
        url += (url.indexOf("?") > -1) ? "&" : "?";
        url += "autoplay=1";
        $video.addClass("js-video-lead-autoplay").attr("src", url);
        $holder.find("img").remove();
        $video.show();
    });

    $(".js-video-lead > img").on("mouseenter", function (event) {
        video_lead_play_state(this, true);
    });

    $(".js-video-lead > img").not(".btn-play").on("mouseleave", function (event) {
        video_lead_play_state(this, false);
    });
});

JQuery jest wymagane do tego rozwiązania i to powinna działać z wieloma osadzonymi filmami (z różnymi obrazami wiodącymi) na tej samej stronie.

Kod wykorzystuje dwa obrazy play-default.png i play-active.png, które są małymi (42 x 30) obrazami przycisku YouTube play. {[3] } jest czarny z pewną przezroczystością i jest wyświetlany początkowo. play-active.png jest czerwony i jest wyświetlany, gdy użytkownik przesunie kursor myszy nad obraz. Ta mimika to oczekiwane zachowanie, które pokazuje normalny osadzony film z YouTube.

0

Author: PaulR,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2016-09-15 13:05:29

Jest to możliwe za pomocą jQuery to zależy od czasu ładowania witryny można dostosować swój limit czasu. Może to być Twój niestandardowy obraz lub możesz użyć youtube image maxres1.maxres2.jpgjpg lub 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);

0

Author: Dessalegne Chekol,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-02-20 15:46:16

To rozwiązanie odtworzy wideo po kliknięciu. Musisz edytować swoje zdjęcie, aby samemu dodać obraz przycisku.

Będziesz potrzebował adresu URL swojego zdjęcia i identyfikatora wideo YouTube. ID filmu YouTube jest częścią adresu URL po parametrze v=, więc dla https://www.youtube.com/watch?v=DODLEX4zzLQ ID byłoby 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>

Pamiętaj, aby zastąpić URL_TO_PICTURE i YOUTUBE_VIDEO_ID w powyższym fragmencie.

Aby wyjaśnić, co tu się dzieje, to wyświetla obraz na górze filmu, ale pozwala kliknięcia przejść przez obraz. Skrypt monitoruje kliknięcia w ramce iframe wideo, a następnie ukrywa obraz w przypadku kliknięcia. Możesz nie potrzebować float: clear.

Nie porównałem tego do innych odpowiedzi tutaj, ale to jest to, co użyłem.

0

Author: sondra.kinsey,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-04-25 16:13:58

To rozwiązanie jest oparte na HTML i CSS za pomocą z-index i hover, co działa, jeśli JS jest wyłączony lub film nie jest Twój(ponieważ możesz dodać miniaturkę w 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

Author: JustinM,
Warning: date(): Invalid date.timezone value 'Europe/Kyiv', we selected the timezone 'UTC' for now. in /var/www/agent_stack/data/www/doraprojects.net/template/agent.layouts/content.php on line 54
2018-08-06 20:20:23

score 9 · Accepted Answer

Nie. Większość filmów z YouTube ma tylko jedną wstępnie wygenerowaną miniaturę "plakatu" (480x360). Zwykle mają kilka innych miniatur o niższej rozdzielczości (120x90). Więc nawet gdyby istniał parametr osadzania, aby użyć alternatywnego obrazu plakatu (którego nie ma), jego wynik nie byłby akceptowalny.

Teoretycznie możesz użyć API odtwarzacza, aby wyszukać wideo w dowolne miejsce, ale byłby to poważny hack dla niewielkiego wyniku.