Pop-up with video for website

Question

I have a normal site and I need that when I enter it have a pop up with a youtube video. A normal pop up with a close button. Can be done in html/css or with javascript or jquery

Answer 1

Tiago, basically you need to put some element that occupies the whole page, for this you can make use of the position: fixed, width: 100%, height: 100% and z-index: 1003.

within this element, you can include an element that will give a fading effect to the content of the page, a opacity: 0.4 must solve.

to center the pop-up in the center of the page, you can make a dock of it using top|left|bottom|right: 0px, then assign a height and width fixed and set the margin: auto.

In the example below I am using the tag <video>, you will only need to replace it with the content you want.

var modalClose = document.querySelector(".modal-close");
modalClose.addEventListener("click", function () {
	modalClose.parentNode.parentNode.classList.add("hidden");
});

html, body {
  padding: 0px;
  margin: 0px;
}

.modal-whapper {
  position: fixed;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  z-index: 1003;
  
  animation: show 1s linear;
  -webkit-animation: show 1s linear;
}

.hidden {
  display: none;
}

@keyframes show {
  0% { opacity: 0 }
  100% { opacity: 1 }
}

@-webkit-keyframes show {
  0% { opacity: 0 }
  100% { opacity: 1 }
}

.modal-overlay {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  opacity: 0.4;
  background-color: black;
}

.modal-container {
  position: absolute;
  top: 0px;
  left: 0px;
  bottom: 0px;
  right: 0px;
  margin: auto;
  height: 320px;
  width: 560px;
  background-color: white;
  border-radius: 5px;
  box-shadow: 0px 0px 10px black;  
}

.modal-close {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 32px;
  height: 32px;
  cursor: pointer;
  background-image: url('http://cdn.flaticon.com/svg/32/32178.svg');
  background-color: white;
  background-size: calc(100% - 10px);
  background-repeat: no-repeat;
  background-position: center;
  border-radius: 50%;
  border: 3px solid black;
  box-shadow: 0px 0px 10px black;
}

video {
  height: 100%;
  width: 100%;
  border-radius: 5px;
  overflow: hidden;
}

<div class="modal-whapper">
  <div class="modal-overlay">

  </div>
  <div class="modal-container">
    <div class="modal-content">
      <video controls="">
        <source src="http://techslides.com/demos/sample-videos/small.webm" type="video/webm"><br>
        <source src="http://techslides.com/demos/sample-videos/small.ogv" type="video/ogg"><br>
        <source src="http://techslides.com/demos/sample-videos/small.mp4" type="video/mp4"><br>
        <source src="http://techslides.com/demos/sample-videos/small.3gp" type="video/3gp"><br>
      </video>
    </div>
    <div class="modal-close">

    </div>
  </div>
</div>

besides, I also fixed the X to close at the top of the modal and made a little animation to display the modal.