Alina Alina - 1 month ago 12
HTML Question

How can I hide embedded video popup when clicking outside?

I have this code, but I do not know how to hide the video when clicking outside.

Here is my code:



$(".popup").click(function () {
var $this = $(this);
var $iframe = $("<iframe>").attr("src", $this.data("link")).css({"width": 400, "height": 300});
var $title = $("<h1>").text($this.data("title"));
$("#video-view").html($title).append($iframe);
$iframe.wrap("<div class='class-video'>");
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="popup" href="#!" data-link="https://www.youtube.com/embed/klModGpSKtc"><img class="img" src="img/annual-smb-report.png"/></a>
<div id="video-view">
</div>





I tried everything but clearly I am doing something wrong.

Thank you in advance.

Answer

This example shows the video when clicking on the image and hides when you click anywhere else:

$(".popup").click(function (e) {
  e.stopPropagation();
  var $this = $(this);
  var $iframe = $("<iframe>").attr("src", $this.data("link")).css({"width": 400, "height": 300});
  var $title = $("<h1>").text($this.data("title"));
  $("#video-view").html($title).append($iframe);
  $iframe.wrap("<div class='class-video'>");
});

$(document).click(function() {
  $("#video-view").empty();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="popup" href="#!" data-link="https://www.youtube.com/embed/klModGpSKtc"><img class="img" src="img/annual-smb-report.png"/></a>
<div id="video-view">
</div>

Comments