Всплывающее окно, с видео Youtube при загрузке сайта

[SunnRi]

Товарсчи камрады.

Прошу помощи и реальных советов и методов борьбы с этим.

 

 

Понадобилось клиенту поставить видео при загрузке сайта (типа маленькая презентация).

 

Пробовал и через jQuery, и тупо через css(3), и через модули...Один и тот же результат - окно есть, а видео нету.

 

 

OpencartPro 2.3, шаблон Barbara.

 

 

Если кто-то подобное делал, подскажите или дайте пруфы, где это реально работает.

 

 

Спасибо

[mpn2005]

Не совсем понял суть проблемы.

В штатной теме используется MagnificPopup, он поддерживает открытие iframe.

Вот пример: https://codepen.io/meladq/pen/CLqtk

 

 

[SunnRi]

  В 10.06.2019 в 22:38, mpn2005 сказав:

Не совсем понял суть проблемы.

В штатной теме используется MagnificPopup, он поддерживает открытие iframe.

Вот пример: https://codepen.io/meladq/pen/CLqtk

 

 

Expand  

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

Единожды, т.е с куки, или хотя бы только на главной.

 

 

У меня такие попытки заканчиваются тем, что окно то появляется, но видео нету.

 

 

[Tom]

Ещё пример

Пример

Реализация

  В 11.06.2019 в 05:44, SunnRi сказав:

Единожды, т.е с куки

Expand  

https://plugins.jquery.com/cookie/

Змінено 11 червня 2019 користувачем Tom

[SunnRi]

  В 11.06.2019 в 07:04, Tom сказав:

Ещё пример

Пример

Реализация

https://plugins.jquery.com/cookie/

Expand  

Благодарю, сегодня попробую потестировать.

[Tom]

  В 11.06.2019 в 05:44, SunnRi сказав:

или хотя бы только на главной

Expand  

А так видимо вообще всё это можно через тот же модуль HTML  опенкарт вывести....

  Показати вміст

<script>
 autoPlayYouTubeModal();

  //FUNCTION TO GET AND AUTO PLAY YOUTUBE VIDEO FROM DATATAG
  function autoPlayYouTubeModal() {
      var trigger = $("body").find('[data-toggle="modal"]');
      trigger.click(function () {
          var theModal = $(this).data("target"),
              videoSRC = $(this).attr("data-theVideo"),
              videoSRCauto = videoSRC + "?autoplay=1";
          $(theModal + ' iframe').attr('src', videoSRCauto);
          $(theModal + ' button.close').click(function () {
              $(theModal + ' iframe').attr('src', videoSRC);
          });
          $('.modal').click(function () {
              $(theModal + ' iframe').attr('src', videoSRC);
          });
      });
  }

    $(window).load(function() {            
      $('#videoModal').modal('show'); 
    });
    </script>
    <style>
 .modal-content {
    -webkit-box-shadow: none;
    box-shadow: none;
    background:transparent;
    border:none;
    outline:none;
}
.modal-content iframe {
    border:none;
    padding:0;
    margin:0;
}
.modal-body .close {
    font-size: 80px;
    margin:-20px 0 0 0;
}
 @media only screen and (max-width: 641px) {
    /***** MODAL PROPERTIES *****/
    .modal-body {
        height:100px;
        padding:0;
        margin: 0;
    }
    .modal-content {
        padding:0;
        margin: 0;
    }
    .modal-dialog {
        position: relative;
        width: auto;
        margin: 15px;
    }
    .modal-body .close {
        margin:-12px 0 0 0;
    }
}
@media only screen and (min-width: 768px) {
    /***** MODAL PROPERTIES *****/
    .close {
        font-size: 30px;
        color: white;
        margin:30px -43px -20px 100px;
    }
}
        </style>    

            <div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="videoModal" aria-hidden="true" style="display: none;">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-body">
                            <button type="button" class="close" data-dismiss="modal" aria-hidden="true" onclick="set_cookie()"></button>×
                            <div>
                                <iframe width="100%" height="316" src="https://www.youtube.com/embed/XEfDYMngJeE" allowfullscreen=""></iframe>
                            </div>
                        </div>
                    </div>
                </div>
            </div>