Pop-up with video for site

Question

Pop-up with video for site

Navigation

#1 by (1 votes)

0

I have a normal website and I need it when I enter it to have a pop up with a youtube video. A normal pop up with a close button. It can be done in html / css or with javascript or jquery

javascript html jquery css

asked by anonymous 01.02.2016 / 14:06

1 answer

Move and Del batch commands are not working How to create a new empty list by clicking "new list"

score 1 · Accepted Answer

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

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

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

In the example below I'm using the <video> tag, you'll just need to replace it with whatever 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>

In addition, I also set X to close at the top of the modal and did a little animation to display the modal.