Jump to content
Sign in to follow this  
SunnRi

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

Recommended Posts

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

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

 

 

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

 

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

 

 

OpencartPro 2.3, шаблон Barbara.

 

 

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

 

 

Спасибо

Share this post


Link to post
Share on other sites

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

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

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

 

 

Share this post


Link to post
Share on other sites
7 часов назад, mpn2005 сказал:

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

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

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

 

 

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

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

 

 

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

 

 

Share this post


Link to post
Share on other sites
1 час назад, SunnRi сказал:

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

А так видимо вообще всё это можно через тот же модуль 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>

 

  • +1 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.

×

Important Information

On our site, cookies are used and personal data is processed to improve the user interface. To find out what and what personal data we are processing, please go to the link. If you click "I agree," it means that you understand and accept all the conditions specified in this Privacy Notice.