JavaScript и jQuery / Создаем iframe с видео

Заметка создана: 20 сентября 2024 г.
Модальное окно с запуском видео при открыти
<div class="modal fade" id="myModalVideo" tabindex="-1" role="dialog">
     <div class="modal-dialog">
       <div class="modal-content">
                <div class="modal-header"><button class="close" type="button" data-dismiss="modal">x</button>
          </div>
        <div class="modal-body">
         <object width="1" height="1" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="//download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,40,0" data="" type="application/x-shockwave-flash"><param name="src" value="/video/Egeria.mp4" /><embed width="1" height="1" type="application/x-shockwave-flash" src="/video/Egeria.mp4" /></object>
        </div>
    </div>
  </div>
</div>
Кнопка вызова модальноно окна
<button type="button" id="toggleModalVideoYoutube" data-bs-toggle="modal" data-bs-target="#myModalVideo">
  Запустить модальное окно
</button>

JavaScript / jQuery

<script>
$(function() {
/*создаем iframe с видео*/
var videoIframe = $("<iframe/>", {
"class": "embed-responsive-item",
"src": "https://www.youtube.com/embed/cNLJB-giaVo?autoplay=1&enablejsapi=1&playerapiid=ytplayer",
"width": "96%",
"height": "400px",
"frameborder": "0",
"allowfullscreen": ""
});
/*по клику на кнопку .toggleModalVideoYoutube аттачим iframe с видео в модалку*/
$('.toggleModalVideoYoutube').click(function () {
$('#myModalVideo').modal('show');
videoIframe.appendTo('#myModalVideo .modal-body');
});
/*по закрытию модалки убираем iframe */
$('#myModalVideo').on('hidden.bs.modal', function () {
videoIframe.detach();
});
});
</script>
video, Модaльное окно, jQuery