Как я могу скрыть встроенное всплывающее видео при нажатии снаружи?

#javascript #html #video #popup

#javascript #HTML #Видео #всплывающее окно

Вопрос:

У меня есть этот код, но я не знаю, как скрыть видео при нажатии снаружи.

Вот мой код:

 $(".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>

Я перепробовал все, но, очевидно, я делаю что-то не так.

Заранее благодарю вас.

1. Итак, вы хотите скрыть класс-видео при нажатии за его пределами? Вы можете прикрепить событие щелчка к телу, которое проверяет, существует ли класс class-video, а затем скрыть его, установив css для отображения none . Но зачем вам такое поведение? Не лучше ли было бы иметь кнопку закрытия?

2. Это также может быть кнопка закрытия, потерпите меня, поскольку я новичок, и я могу сказать глупости. Кнопка закрытия может быть также на изображении, которое ее открывает. Можете ли вы показать мне пример того, что вы имеете в виду?

Ответ №1:

В этом примере видео отображается при нажатии на изображение и скрывается при нажатии в любом другом месте:

 $(".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>

1. Большое вам спасибо, Фабиан, это работает чудесно, именно то, что мне было нужно 🙂

2. @Alina В данном конкретном случае это работает из-за iframe. Если всплывающее div окно появляется всякий раз, когда вы нажимаете даже в самом всплывающем окне, оно закроет всплывающее окно. Подумай, хочешь ли ты этого. (Демонстрация div того, что закрывает всплывающее окно при щелчке во всплывающем окне: jsbin.com/bumonozipo/edit?html , js, вывод )

Ответ №2:

Хитрость заключается в том, чтобы добавить скрытый слой на весь экран. Когда пользователь нажимает на этот слой, вы скроете фильм.

обратите внимание на z-index , это важно.

Вот так:

 $(".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'>");
  $('.overlay').show();
});

$('.overlay').click(function(){
  $(this).hide();
  $('#video-view').html('');
});

 #video-view {
  z-index: 2;
  position:relative;
  display: inline-block;
}

.overlay {
  position: absolute;
  z-index:1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: none;
}

 <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>
<div class="overlay"></div>