Question

我将YouTube视频iframe嵌入到弹出模式中，该模式在进入网站几秒钟后出现。我已经尝试使用iframe参数，jQuery和CSS进行多种操作，但是当模态出现时，视频始终显示低质量，模糊的缩略图。如果我右键单击并重新加载iframe，则它将加载适当的高质量预览缩略图。

实际视频质量很好，高清分辨率为1080，所以这并不像视频质量差。

我尝试将target=_self添加到iframe代码中
我尝试了$( '#iframe' ).attr('src', $( '#iframe' ).attr('src'));
我尝试了$( '#iframe' ).attr( 'src', function ( i, val ) { return val; });
我尝试将iframe的width和height参数更改为大于560和315，甚至完全删除了这两个参数，但没有任何改变。
我尝试默认将iframe src设置为空，然后使用jQuery填充它，但这没用：$( '#iframe' ).attr('src', 'https://www.youtube.com/embed/TL90qfsFplc');

    <div class="subscribe-modal-mask">
        <div class="subscribe-modal-container">
            <div class="video-container">
                <iframe id="iframe" width="900" height="315" target="_self" src="https://www.youtube.com/embed/TL90qfsFplc" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
            </div>
            <div class="modal-head">
                <p id="modal-h1">Watch Now - Change Your Image of Dumpsters</p>
                <div class="subscribe-modal-close">X</div>
                <p class="modal-text">Sign up to learn how making the switch can save you time, money, and more
                    money</p>
                {!! do_shortcode('[gravityform id="4" title="false" description="false"]') !!}
            </div>
        </div>
    </div>

 <script>
            (function ($) {
                $(document).ready(function () {
                    function createCookie(name, value, days) {
                        if (days) {
                            var date = new Date();
                            date.setTime(date.getTime() + (days * 24 * 60 * 60 * 12000));
                            var expires = "; expires=" + date.toGMTString();
                        } else var expires = "";
                        document.cookie = name + "=" + value + ';' + expires + "; path=/; secure: true;";
                    }
                    $( '#iframe' ).attr('src', $( '#iframe' ).attr('src'));

                    $('.subscribe-modal-close').on('click', function () {
                        createCookie('hedstromenvguest', '1', '.333333333');
                        $('.subscribe-modal-mask').fadeOut(1000);
                    });

                    $('.subscribe-modal-mask').mousedown(function(e) {
                        var clicked = $(e.target);  //get the element clicked
                        if (clicked.is('.subscribe-modal-container') || clicked.parents().is('.subscribe-modal-container')) {
                            return; // click happened within the dialog, do nothing here
                        } else {  //click was outside the dialog, so close it
                            $('.subscribe-modal-mask').fadeOut(1000);
                        }
                    });

                    $('.subscribe-modal-mask').on('click', function () {
                        createCookie('hedstromenvguest', '1', '.333333333');
                    });

                    $('.subscribe-modal-container .gform_button').on('click', function () {
                        createCookie('hedstromenvguest', '1', '.333333333');
                    });


                });
            })(jQuery);
        </script>

  .video-container {
    position: relative;
    overflow: hidden;
    width: 100%;
    padding-top: 36.25% !important;
    iframe {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      max-width: 100%;
      height: 100%;
      border: 0;
    }
  }

不知何故，我必须将视频放在模态下才能首先加载HQ预览，而不是低质量，模糊的视频。否则，对用户来说看起来很糟糕。

默认情况下，嵌入到弹出模式中的YouTube会加载低质量的预览图像

0 个答案: