All geek questions in one place

Closing Youtube Popups

I am trying to create a youtube modal view similar to this: https://www.udacity.com/ , but in wordpress, which uses a visual composer.

I have 3 problems with this modal:

1 - When the background layer is pressed, the contents of the top navigation menu are not distributed, they are still displayed. How to make the background stretch and close the menu?

2 - The scroll bars are hidden, but the user can still scroll the wheel, and some elements down the page are displayed at the top of the pop-up layer

3. The biggest problem is closing the video and creating tooltips. The source code was fixed in size, I changed the percentage and made it work, but it looks very strange in mobile

Link to the page:

http://blacktrax.cast-soft.com/lighting-test-2/

CSS

/* begining of master container for popup */

.mm-product-video-modal-container {
  position: fixed;
  top: 0px;
  left: 0px;
  z-index: 10000;
  width: 100%;
  height: 100%;
  background: #03070D;
  display: none;
  overflow: hidden; /* hides the scrollbar for the master container popup */
}


/* end of master container */

.mm-product-video-modal-container.open {
  display: block;
}

.mm-product-video-modal-close:hover {
  cursor: pointer;
}

.mm-product-video-modal-close {
  color: #fff;
  position: fixed;
  z-index: 1000000000;
  top: 20px;
  right: 20px;
  font-size: 40px;
}


/* begining of video modal container*/
.mm-product-video-modal {
  width: 70%;
  height: 70%;
  max-height: 664px;
  overflow: hidden;
  position: relative;
  top: -1000px; /* position where the video modal box is generated*/
  text-align: center; /* centralized video*/
  vertical-align: middle;
  border-radius: 4px;
}
/* end of video modal container */

.mm-product-video-modal.open {
  top: 150px;
  margin-bottom: 150px;
}

.mm-video-overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  background: transparent;
  width: 100%;
  height: 100%;
  z-index: -1;
}

.mm-launch-container {
  margin-top: 2em;
}

.mm-launch {
  border: none;
  color: #ffff;
  padding: 5px 60px;
  font-size: 25px;
}

.mm-launch-container p {
  text-align: justify;
  font-size: 16px;
  font-weight: 300;
  margin-bottom: 30px;
}

.mm-launch-container h2 {
  font-size: 50px;
  font-weight: 800;
  letter-spacing: -1px;
  margin-bottom: 20px;
}

.dropper {
    transition: top 0.5s ease-in-out;
}

JavaScript:

<script type="text/javascript">

function onYouTubeIframeAPIReady() {
  player = new YT.Player('video-placeholder', {
    width: 1180,
    height: 664,
    videoId: 'gZC1TOLVi60',
    events: {
      onReady: initialize
    }
  });
}
function initialize(){

}            

function deployVideo() {
  jQuery('.mm-product-video-modal-container').addClass('open');
  setTimeout(function() {
    jQuery('.mm-product-video-modal').addClass('open');
    player.playVideo();
  }, 250);
}

function destroyVideo() {
  jQuery('.mm-product-video-modal').removeClass('open');
  setTimeout(function() {
    jQuery('.mm-product-video-modal-container').removeClass('open');
    player.pauseVideo();
  }, 250);
}

jQuery('.mm-video-overlay').on('click', function() {
  destroyVideo();
});

jQuery('.mm-launch').on('click',function() {
  deployVideo();
});

</script>

HTML:

<script src="https://www.youtube.com/iframe_api"></script>
<div align="center" class="mm-product-video-modal-container">
    <div class="mm-product-video-modal dropper">
        <div class="embed-responsive embed-responsive-16by9">
            <div id="video-placeholder"></div>
        </div>
    </div>
    <div class="mm-video-overlay"></div>
</div>

<div class="mm-launch-container container" align="center">
  <div class="col-sm-offset-3 col-sm-6">
  <button class="mm-launch">Launch Video</button>
  </div>
</div>

This is how the code is inserted: enter image description here

+4
source share
2 answers

For problem 1:

You need to set the z-index header to a lower value than the overlay. Add the following css class to the styles to overwrite the z-index header.

header{
   z-index:1 !important;
}

Also adjust css class z-index mm-video-overlayto 1001

.mm-video-overlay {
  position: fixed;
  top: 0px;
  left: 0px;
  background: transparent;
  width: 100%;
  height: 100%;
  z-index: 1001;
}

For problem 2:

You need to use the property overflow:hiddenon the body when the player’s overlay is displayed, and then remove it when the video overlay is closed.

Code for use in js:

function deployVideo() {
  jQuery('.mm-product-video-modal-container').addClass('open');
  setTimeout(function() {
    jQuery('.mm-product-video-modal').addClass('open');
    player.playVideo();
  }, 250);
  jQuery('body').css('overflow','hidden');
}

function destroyVideo() {
  jQuery('.mm-product-video-modal').removeClass('open');
  setTimeout(function() {
    jQuery('.mm-product-video-modal-container').removeClass('open');
    player.pauseVideo();
  }, 250);
  jQuery('body').css('overflow','');
}

This will take care of the scroll issue

For task 3:

Set the top property as a percentage of css class mm-product-video-modal.opento 15%

.mm-product-video-modal.open {
   top: 15%;
   margin-bottom: 150px;
}
+1
source

:

HTML:

<script src="https://www.youtube.com/iframe_api"></script>
<div align="center" class="mm-product-video-modal-container">
    <div class="mm-product-video-modal dropper">
        <div class="embed-responsive embed-responsive-16by9">
            <div id="video-placeholder"></div>
        </div>
    </div>
    <div class="mm-video-overlay"></div>
</div>

<div class="mm-launch-container container" align="center">
  <div class="col-sm-offset-3 col-sm-6">
  <button class="mm-launch">Watch the video</button>
  </div>
</div>

JAVASCRIPT:

<script type="text/javascript">

function onYouTubeIframeAPIReady() {
  player = new YT.Player('video-placeholder', {
    width: 1180,
    height: 664,
    videoId: 'gZC1TOLVi60',
    events: {
      onReady: initialize
    }
  });
}
function initialize(){

}            

function deployVideo() {
  jQuery('.mm-product-video-modal-container').addClass('open');
  setTimeout(function() {
    jQuery('.mm-product-video-modal').addClass('open');
    player.playVideo();
  }, 250);
  jQuery('body').css('overflow','hidden');
}

function destroyVideo() {
  jQuery('.mm-product-video-modal').removeClass('open');
  setTimeout(function() {
    jQuery('.mm-product-video-modal-container').removeClass('open');
    player.pauseVideo();
  }, 250);
  jQuery('body').css('overflow','');
}

jQuery('.mm-video-overlay').on('click', function() {
  destroyVideo();
});

jQuery('.mm-launch').on('click',function() {
  deployVideo();
});

</script>

2 .

1- , Javascript/Jquery, put playerVars: {'autoplay': 1, 'controls': 2} function onYouTubeIframeAPIReady

JAVASCRIPT:

function onYouTubeIframeAPIReady() {
  player = new YT.Player('video-placeholder', {
    width: 1180,
    height: 664,
    videoId: 'gZC1TOLVi60',
    playerVars: { 'controls':2 },
    events: {
      onReady: initialize
    }
  });
}

: - playerVars , 0,1,2, ,

2. - - , , reset ,

0

Source: https://habr.com/ru/post/1660212/

More articles:


All Articles