БЛОГ НА HUSL


Есть ли возможность сделать остановку видео при закрытии модального окна на css и один скрипт на все iframe

Автор вопроса: KRAI RUS

Сейчас приходится делать скрипт на каждый iframe. Сделал остановку воспроизведения при закрытии модального окна, но она работает только в Коде-пен. При загрузке на сервер почему то не работает.( пример кода только на первое видео)

Ниже человек под ником Grundy предложил пример с выборкой по классам <(Спасибо дружище) , но она открывает только второй iframe почему то (при тестировании в коде-пен, (По указанной ссылке товарищем есть такая информация : Если указанный селектор включает псевдо-элемент CSS,возвращенный список всегда пуст. может в этом причина?)) на сайт не загружал(быть может зря. ) .(К сожалению на тот вопрос, который отвечал человек под ником, Grundy, заблокировали посему решил продолжить. Надеюсь АДМИНЫ придержат коней, в стопе. И дадут этому вопросу пожить, не ограничиваясь одним ответом. Дадут понимающим людям ответить на сие вопрос.)

Уже сделал закрытие модального окна на Css с остановкой видео , правда пришлось атрибуту (а)- который закрывает модальное окно добавить индивидуальный класс. И конечно пришлось на каждый фрейм писать код. На данный момент на странице около 30 видео , загрузка по PageSpeed Insights 98% мобильная и 100% пк. При подключении счётчиков яндекс и гугл упало на один процент. Так же есть пример вставки видео с ютуб.(Кому будет непонятно пишите постараюсь ответить) Есть рабочие предложения как уменьшить количество кода на странице , буду очень благодарен.

пример тут

(function () {var button = document.querySelector('.moscow-citi-scherbinka');var iframe = document.querySelector('.ifr-moscow-scherbinka');
  button.addEventListener('click', function () {iframe.src = iframe.getAttribute('data-src');iframe.classList.toggle('hidden.iframe');});})();
(function () {var a = document.querySelector('.iw-closemoscow11-1');var iframe = document.querySelector('.ifr-moscow-scherbinka');
   a.addEventListener('click', function () {iframe.src = iframe.src/0 ;});})();
(function () {var button = document.querySelector('.moscow-citi-aRoqXNQVyvY');var iframe = document.querySelector('.ifr-moscow-aRoqXNQVyvY');
  button.addEventListener('click', function () {iframe.src = iframe.getAttribute('data-src');iframe.classList.toggle('hidden.iframe');});})();
(function () {var a = document.querySelector('.iw-closemoscow11-2');var iframe = document.querySelector('.ifr-moscow-aRoqXNQVyvY');
   a.addEventListener('click', function () {iframe.src = iframe.src/0 ;});})();
(function () {var button = document.querySelector('.moscow-citi-UDxoaftgDFM');var iframe = document.querySelector('.ifr-moscow-UDxoaftgDFM');
  button.addEventListener('click', function () {iframe.src = iframe.getAttribute('data-src');iframe.classList.toggle('hidden.iframe');});})();
(function () {var a = document.querySelector('.iw-closemoscow11-3');var iframe = document.querySelector('.ifr-moscow-UDxoaftgDFM');
   a.addEventListener('click', function () {iframe.src = iframe.src/0 ;});})();
#top-mos .foto-block,
#top .foto-block,
div.top .foto-block,
#top-okrug .foto-block {
  width: 255px;
  height: auto;
  margin-top: 20px;
  margin-top: 20px;
  margin-right: 10px;
  margin-left: 10px;
  padding: 5px 8px 5px 10px;
  background: #fbfbfb85;
}
.top-mos {
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  justify-content: center;
  background-color: rgba(253, 253, 252, 0.651);
}
.top-mos .foto-block,
#top .foto-block,
div.top .foto-block,
#top-okrug .foto-block {
  width: 255px;
  height: auto;
  margin-top: 20px;
  margin-right: 10px;
  margin-left: 10px;
  padding: 5px 8px 5px 10px;
  background: #fbfbfb85;
}

div.top .video-block {
  background-color: #f4f7ed9d;
  width: 300px;
  height: auto;
  padding: 5px;
  margin: 4px;
}
div.top1 iframe {
  background-color: rgba(214, 219, 255, 0.692);
  margin: 10px;
}
body#tinymce {
  font-size: large;
  height: 200px;
}
.block {
  display: block;
  background-color: rgba(214, 235, 247, 0.76);
  text-align: center;
  max-width: 100%;
}
#block {
  display: block;
  background-color: rgba(214, 235, 247, 0.76);
  text-align: center;
  max-width: 100%;
}

.top .video-block {
  background-color: #f4f7ed9d;
  width: 300px;
  height: auto;
  padding: 5px;
  margin: 4px;
}
#top div.video-block input {
  border-radius: 50px;
  border: 2px solid #d8460cec;
  background-color: rgba(255, 255, 255, 0.822);
  color: rgb(122, 4, 122);
  padding: 8px;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
a {
  text-decoration: none;
}
#blo-meny{width:300px;height:auto; margin:0;letter-spacing:1px;display:inline;}
















.wrapper {
  text-align: center;
}
.back, .iw-modal-btn {
  text-align: center;
  display: inline-block;
  text-decoration: none;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  transition: all 1s ease;
}
.back:hover, .iw-modal-btn:hover {
     -webkit-transform: scale(1.1);
     -moz-transform: scale(1.1);
     -o-transform: scale(1.1);
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
    background:#439ce000;
}

/********Модальное окно************/
  
/*CSS-свойства для заднего фона модального окна*/
.iw-modal {
  opacity: 0;
  background: rgb(0 0 0 / 43%);
  pointer-events: none;
  position: fixed;
  top: 10px;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 9999;
  transition: all 1s ease;
}
.iw-modal:target {
    opacity: 1; /*при клике окно становится видимым*/
    pointer-events: auto; /*теперь по окну можно кликать мышкой*/
    overflow-y: auto; /*прокрутка по вертикли страницы*/
}

.iw-modal-wrapper {
  max-width: 800px;
    height: 600px;
    margin: auto;
    margin-top: 5vh;
}

/*CSS-свойства для блока, содержащего контент модального окна */ 
.iw-CSS-modal-inner {
    position: relative;
}
/*CSS-свойства заголовка модального окна */
.iw-modal-header {
  padding: 15px;
  margin-top: 20px;
  background: #fcfef6;
  position: relative;
}


/*CSS для кнопки закрытия окна*/
a.iw-close {
  position: absolute;
  top: 2px;
  right: 10px;
  font-size: 26px;
  color: #000;
  text-decoration: none;
}

a.iw-close:hover, a.iw-close:focus {
    color: #000; /*цвет шрифта при наведении*/
    cursor: pointer;
}

/*CSS для блока с текстом модального окна*/

.iw-modal-text {min-width: 90%;
  height: 600px;
}
.modal-iframe{min-width:100%;min-he(function () {


  var button = document.querySelector('.popup');
  var iframe = document.querySelector('.modal-iframe');


  button.addEventListener('click', function () {
  
    iframe.src = iframe.getAttribute('data-src');

    iframe.classList.toggle('hidden.iframe');

  });


})();ight:90%;}

iframe {
  display: block;
}

.hidden.iframe {
  display: none;
}
   <div class="top">
<div class="video-block one"><div class="wrapper"><button class="moscow-citi-scherbinka button_citi"><a href="#iw-modal-moscow11-1" class="iw-modal-btn"><img src="https://mblonline.ru/mos/foto/scherbinka.jpg" width="100%" height="169px"></a></button><div class="tab"><input type="checkbox" class="read" id="readsevmoscow26" /><label for="readsevmoscow26" class="more-button">Веб-камера установлена на Спортивной улице</label><div class="tab-content">и дает обзор на пересечение Симферопольского шоссе, Обводной дороги и Железнодорожной улицы</div></div>
 <div id="iw-modal-moscow11-1" class="iw-modal"><div class="iw-modal-wrapper"><div class="iw-CSS-modal-inner"><div class="iw-modal-header"><a href="#close" title="Закрыть" class="iw-close iw-closemoscow11-1">×</a></div><div class="iw-modal-text">
 <iframe id="" class="ifr-moscow-scherbinka modal-iframe hidden.iframe" data-src="https://mblonline.ru/player/playerjs.html?file=https://cameras.inetcom.ru/hls/camera12_13.m3u8" width="300" height="200" frameborder="0" allowfullscreen></iframe>
  </div></div></div></div></div></div>
    <div class="video-block one"><div class="wrapper"><button class="moscow-citi-aRoqXNQVyvY button_citi"><a href="#iw-modal-moscow11-2" class="iw-modal-btn"><img src="http://img.youtube.com/vi/aRoqXNQVyvY/0.jpg" width="100%" height="169px"></a></button><div class="tab">Веб-камера открывает вид на улицу Чароитовая и 2-ю Нововатутинскую улицув районе Новые Ватутинки, поселение Десёновское.</div>
 <div id="iw-modal-moscow11-2" class="iw-modal"><div class="iw-modal-wrapper"><div class="iw-CSS-modal-inner"><div class="iw-modal-header"><a href="#close" title="Закрыть" class="iw-close iw-closemoscow11-2">×</a></div><div class="iw-modal-text">
<iframe id="" class="ifr-moscow-aRoqXNQVyvY modal-iframe hidden.iframe" data-src="https://www.youtube.com/embed/aRoqXNQVyvY" width="300" height="200" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div></div></div></div></div></div>
    <div class="video-block one"><div class="wrapper"><button class="moscow-citi-UDxoaftgDFM button_citi"><a href="#iw-modal-moscow11-3" class="iw-modal-btn"><img src="http://img.youtube.com/vi/UDxoaftgDFM/0.jpg" width="100%" height="169px"></a></button><div class="tab">Веб-камера открывает вид на Квартал 2-3 в районе Новые Ватутинки 188</div>
 <div id="iw-modal-moscow11-3" class="iw-modal"><div class="iw-modal-wrapper"><div class="iw-CSS-modal-inner"><div class="iw-modal-header"><a href="#close" title="Закрыть" class="iw-close iw-closemoscow11-3">×</a></div><div class="iw-modal-text">
<iframe id="" class="ifr-moscow-UDxoaftgDFM modal-iframe hidden.iframe" data-src="https://www.youtube.com/embed/UDxoaftgDFM" width="300" height="200" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div></div></div></div></div></div></div>


Источник

Ответы (0 шт):

licensed under cc by-sa 3.0 with attribution.