jquery popup css with youtube video

index.html

<h1>Watch Ruth on HGTV</h1>
<input type="button" value="Open popup!" id="popup__toggle" />

<div class="popup__overlay">
  <div class="popup"> <a href="#" class="popup__close">X</a> https://developers.google.com/youtube/player_parameters?hl=ru
    <br/> https://developers.google.com/youtube/iframe_api_reference?hl=ru
  </div>
</div>

<!--  http://stackoverflow.com/questions/8667882/how-to-pause-a-youtube-player-when-hiding-the-iframe  -->
<!-- BG color #352416 - screen is at 95% opacity -->
<!-- <iframe width="420" height="315" src="https://www.youtube.com/embed/TRGoy0XLrUA" frameborder="0" allowfullscreen></iframe> -->

<div class="popup__overlay">
  <div class="popup" id="popupVid">
    <a href="#" class="popup__close">X</a>
    <!-- <iframe width="640" height="480" src="https://www.youtube.com/embed/TRGoy0XLrUA?showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe> -->
    <iframe src="https://www.youtube.com/embed/TRGoy0XLrUA?showinfo=0&rel=0&enablejsapi=1" frameborder="0" allowfullscreen></iframe>
  </div>
</div>

jquery-popup-css-with-youtube-video.markdown

jquery popup css with youtube video

A Pen by Artur Parkhisenko on CodePen.

License.

script.babel

var p = $(".popup__overlay");

$("#popup__toggle").click(function() {
  p.css("display", "block");
});
p.click(function(event) {
  e = event || window.event;
  if (e.target == this) {
    $(p).css("display", "none");
  }
});
$(".popup__close").click(function() {
  p.css("display", "none");
});

//video popup
function toggleVideo(state) {
  // if state == 'hide', hide. Else: show video
  var div = document.getElementById("popupVid");
  var iframe = div.getElementsByTagName("iframe")[0].contentWindow;
  //div.style.display = state == 'hide' ? 'none' : '';
  func = state == "hide" ? "pauseVideo" : "playVideo";
  iframe.postMessage(
    '{"event":"command","func":"' + func + '","args":""}',
    "*"
  );
}

$("#popup__toggle").click(function() {
  p.css("visibility", "visible").css("opacity", "1");
});

p.click(function(event) {
  e = event || window.event;
  if (e.target == this) {
    $(p)
      .css("visibility", "hidden")
      .css("opacity", "0");
    toggleVideo("hide");
  }
});

$(".popup__close").click(function() {
  p.css("visibility", "hidden").css("opacity", "0");
  toggleVideo("hide");
});

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>

style.css

html {
  min-height: 100%;
}

body {
  min-height: 100%;
  background: #fff;
  font: 14px/125% Tahoma;
  text-align: center;
}

.popup__overlay {
  display: none;
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(53, 36, 22, 0.95);
  text-align: center;
  z-index: 100;
}

.popup__overlay:after {
  display: inline-block;
  height: 100%;
  width: 0;
  vertical-align: middle;
  content: "";
}

.popup {
  display: inline-block;
  position: relative;
  width: 100%;
  height: 100%;
  max-width: 640px;
  max-height: 480px;
  padding: 20px;
  border: 1px solid black;
  background: black;
  color: white;
  vertical-align: middle;
}

.popup-form__row {
  margin: 1em 0;
}

.popup__close {
  display: block;
  position: absolute;
  top: 1px;
  right: 1px;
  width: 12px;
  height: 12px;
  padding: 8px;
  cursor: pointer;
  text-align: center;
  font-size: 12px;
  line-height: 12px;
  color: rgba(53, 36, 22, 0.95);
  text-decoration: none;
  font-weight: bold;
}

.popup__close:hover {
  color: #eea200;
}

iframe {
  width: 100%;
  height: 100%;
}

/* other styles */

input[type="button"] {
  border: none;
  padding: 0.5em;
  background-color: yellow;
}

input[type="button"]:hover {
  background-color: yellowgreen;
}