jquery - 嵌入式 Youtube 视频的缩略图模糊

Question

我正在我的网站上嵌入来自 YouTube channel 的最新视频。但是，当它显示时，视频的缩略图非常模糊/sd。无论如何我可以强制使用总部缩略图吗？提供现场演示 here .此外，当我在单击最新按钮后在浏览器上按回车键时，缩略图的质量会达到应有的水平。这是 jQuery:

$(document).ready(function()
{
    $('#watch').on('click', function () {
    $(".iframe-container").show(300, function() 
    {
        $(".iframe-container iframe").css('opacity', 1);
        $(".info").css('opacity', 0);
        $("#watch").css('opacity', 0);
        $(".info").css('z-index', 1);
        $("#watch").css('z-index', 1);
        $("video#bg-vid").css('opacity', 0);   
    });
    $("#return").show("fast", function() {  $("#return").css('opacity', 1);});
});


  $('#return').on('click', function () 
  {
    $(".iframe-container").fadeOut("fast",function() 
    {
        $(".iframe-container iframe").attr('style', '');
        $(".info").attr('style', '');
        $("#watch").attr('style', '');
        $("#return").attr('style', '');
        $("video#bg-vid").attr('style', '');
        $('iframe').attr('src', $('iframe').attr('src'));  //stops video
    }); 
  });
});

以及 iframe 的 css:

.iframe-container
{
    z-index: 1;
    display: none;
    position: absolute;
    background-color: transparent;
    top:160px;
    width:55%;
    height: 55%;
    color:white;
    font-size: 40px;
    left:0; 
    right:0; 
    margin:auto;

}
.iframe-container iframe
{
    width:100%;
    height: 100%;
    opacity: 0;
    -webkit-transition: opacity 0.3s ease-out;
    -moz-transition:    opacity 0.3s ease-out;
    -o-transition:      opacity 0.3s ease-out;
    -ms-transition:     opacity 0.3s ease-out;
}

感谢任何帮助，谢谢。

Answer 1

我发现问题主要发生在 Firefox 上，而对我有帮助的是在视频 ID 后加上 ?autoplay=1。 src="www.youtube.com/embed/{video_id}?autoplay=1"希望对你有帮助