Ещё о выводе плеера на страницах сайта

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

Для работы нужен будет jQuery, и js код сооствественно нужно подключать после {jsfiles} или, если у вас джиквери ДЛЕ выводится вверху сайта — можно добавить скрипт в код полной новости.
Подключаем js:

<script>
                document.addEventListener("DOMContentLoaded", function(event) {
                    $(document).one('click', '#trailer_container', function () {
                        var s2  = document.createElement("iframe");
                        s2.allow = "accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture";
                        s2.allowFullscreen = true;
                        s2.frameBorder = 0;
                        s2.width = "100%";
                        s2.height = "100%";
                        s2.src  = "[xfvalue_trailer]";
                        $("#trailer_container").append(s2);
                        $("#trailer_play_btn").hide();
                    });
                });
</script>

CSS стили:

               #trailer_container {
                                    height: calc(56.2525vw);
                    max-height: 343px;
                    background-color: #000;
                    position: relative;
                    cursor: pointer;
                }
                #trailer_container:hover {
                    background-color: #807f7b;
                }
                .video-overlay-play-button {
                    box-sizing: border-box;
                    width: 100%;
                    height: 100%;
                    padding: 10px calc(50% - 50px);
                    position: absolute;
                    top: 0;
                    left: 0;
                    opacity: 0.95;
                    display: block;
                    cursor: pointer;
                    background-image: linear-gradient(transparent, #000);
                }

Непосредственно вывод самого плеера:

			<div id="trailer_container">
				<svg id="trailer_play_btn" class="video-overlay-play-button" viewbox="0 0 200 200" alt="Play video">
				<circle cx="100" cy="100" r="90" fill="none" stroke-width="15" stroke="#fff"/>
				<polygon points="70, 55 70, 145 145, 100" fill="#fff"/>
				</svg>
			</div>

Пример работы код в несжатом виде

Ещё один способ отложенной загрузки iframe на сайте — отложить на некоторое время загрузку окна iframe, чтобы страница загрузилась быстрее, тем самым увеличить ее показатели pagespeed.

<iframe id="map0921" style="border: 0;" src=" " width="100%" height="450" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

JS код:

<script>
window.onload = function(){
 setTimeout(function(){
   document.getElementById('map0921').src = 'ваш урл';
 },5000);
};
 
 </script>

5000 — это задержка в миллисекундах.
Источник

Оба способа рабочие, проверено.