YouTube, встроенный в модальное всплывающее окно, по умолчанию загружает некачественное изображение предварительного просмотра. - PullRequest
Новая
       19

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

2 голосов
/ 02 июля 2019

У меня есть встроенный видеофрейм на YouTube, который появляется через несколько секунд нахождения на сайте. Я пробовал несколько вещей с параметрами iframe, jQuery и CSS, но видео всегда показывает низкокачественную, размытую миниатюру, когда появляется модал. Если щелкнуть правой кнопкой мыши и перезагрузить iframe, то он загрузит соответствующий эскиз предварительного просмотра высокого качества.

Реальное видео в порядке и имеет разрешение HD 1080, поэтому видео не имеет плохого качества.

  • Я попытался добавить target=_self в тег iframe
  • Я пытался $( '#iframe' ).attr('src', $( '#iframe' ).attr('src'));
  • Я пытался $( '#iframe' ).attr( 'src', function ( i, val ) { return val; });
  • Я пытался изменить параметры width и height в iframe, чтобы они были больше 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, а не низкое качество, размытое изображение. В противном случае это выглядит ужасно для пользователей.

...