Dudaevskiy
9/13/2019 - 11:27 AM

PopUps автоматический запуск видео YouTube сразу при открытии попапа с прелоадером

<!--
Причем для отложенной загрузки iframe YouTube можно юзать плагин LazyLoader
тогда код будет таким:

<div class="videoWrapper" style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.2493%;">
  <iframe iframe src="https://www.youtube.com/embed/urhNZz_Wddg?byline=0&badge=0&portrait=0&title=0&branding=0&autoplay=1&controls=1&amp;disablekb=1&amp;allowfullscreen=1" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen scrolling="no"></iframe>
</div>

Настройки на стороне плагина:
http://bit.ly/2kkoicm
-->

<div class="videoWrapper" style="left: 0; width: 100%; height: 0; position: relative; padding-bottom: 56.2493%;">
  <iframe iframe data-iframely-url="https://www.youtube.com/embed/urhNZz_Wddg?byline=0&badge=0&portrait=0&title=0&branding=0&autoplay=1&controls=1&amp;disablekb=1&amp;allowfullscreen=1" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen scrolling="no"></iframe>
  <!-- iframe data-iframely-url="https://www.youtube.com/embed/urhNZz_Wddg?byline=0&badge=0&portrait=0&title=0&branding=0&autoplay=1&allowfullscreen=1" style="border: 0; top: 0; left: 0; width: 100%; height: 100%; position: absolute;" allowfullscreen scrolling="no"></iframe -->
</div>
 <script async src="//cdn.iframe.ly/embed.js" charset="utf-8"></script>
/* PopUps */
.spu-box.spu-centered{
    background-color:white !important;
}
.spu-content div.videoWrapper:before {
    position: absolute;
    content: " ";
    background: url(/wp-content/uploads/2019/09/vodokanal-generator.svg) no-repeat 4% 0%;
    /* background-repeat: no-repeat; */
    background-color: white;
    background-size: contain;
    background-position: center;
/*     z-index: 1; */
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    margin:10rem;
}
@media screen and (max-width:768px){
	.spu-content div.videoWrapper:before {
		margin:15% !important;
	}
}

.spu-close {
    color: #234082 !important;
}