0

Tenho um site normal e preciso que quando eu entro nele tenha um pop up com um video do youtube. Um pop up normal com um botão de fechar. Pode ser feito em html/css ou com javascript ou jquery

1 Resposta 1

1

Tiago, basicamente você precisa colocar algum elemento que ocupe toda a pagina, para isto você pode fazer uso do position: fixed, width: 100%, height: 100% e z-index: 1003.

dentro deste elemento, você pode incluir um elemento que irá dá um efeito de esmaecimento do conteúdo da pagina, um opacity: 0.4 deve resolver.

para centralizar o pop-up no centro da pagina, você pode fazer um dock da mesma usando top|left|bottom|right: 0px, então atribuir um height e width fixos e setar o margin: auto.

No exemplo abaixo estou utilizando a tag <video>, você só vai precisar substituir a mesma pelo conteúdo que desejar.

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>

além disto, também fixei o X para fechar no topo do modal e fiz uma pequena animação para exibir o modal.

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .