как всплыть YouTube видео на той же странице, используя угловой - PullRequest
0 голосов
/ 10 октября 2018

Это мой HTML-код:

<a href="#img1">
<img src="http://www.clipartbest.com/cliparts/9Tp/enR/9TpenRLTE.svg">
</a>
<a href="#_" class="lightbox" id="img1">
<div id="videoModal" class="modal hide fade in" tabindex="-1" role="dialog"
  aria-labelledby="videoModalLabel" aria-hidden="false" style="display: block;">
  <div class="modal-header">
  <button type="button" class="close full-height" data-dismiss="modal"
   aria-hidden="true">X</button>
   <h3>Donna Galletta- Showreel</h3>
    </div>
   <div class="modal-body">
  <iframe width="870" height="489"src="https://www.youtube.com/embed/rEw8_IRGCTk&t=6s"
 frameborder="0" allowfullscreen=""></iframe>
  </div>
 <div class="modal-footer"></div>
  </div>
 </a>

Мой CSS-код:

.lightbox {
    /** Default lightbox to hidden */
    display: none;

    /** Position and style */
    position: fixed;
    z-index: 999;
    width: 100%;
    height: 100%;
    text-align: center;
    top: 0;
    left: 0;
    background: rgba(0,0,0,0.8);
}
.lightbox:target {
    /** Remove default browser outline */
    outline: none;

    /** Unhide lightbox **/
    display: block;
}

/** videoModal **/
#videoModal {
  border-radius: 0;
  width: 870px;
  margin:auto;}
  #videoModal .modal-header {
    background: #000;
    border: 0;
    color: #fff;
    position: relative;
          height:35px; }
    #videoModal .modal-header h3 {
      font-size: 18px;
      line-height: 22px;
      font-family:Arial, Helvetica, sans-serif;
      padding:5px;}
  #videoModal .modal-body {
    height: 489px;
    padding: 0;
    max-height: none;
    overflow: hidden; }
  #videoModal .modal-footer:empty {
    display: none !important; }
  #videoModal .close {
    background: #DB00B8;
    color: #fff;
    font-size: 24px;
    margin: 0;
    opacity: 1;
    position: absolute;
    right: 0;
    text-shadow: none;
    top: 0;
    width: 38px; }

Вышеприведенный код работает.Когда я нажимаю на изображение, появляется новое всплывающее окно, однако видео не воспроизводится.

Выдает ошибку в консоли, как показано ниже

core.js:1673 ERROR Error: Uncaught (in promise): Error: Cannot match
any routes. URL Segment: 'img1' Error: Cannot match any routes. URL
Segment: 'img1'
    at ApplyRedirects.push../node_modules/@angular/router/fesm5/router.js.ApplyRedirects.noMatchError
(router.js:1384)
    at CatchSubscriber.selector (router.js:1365)
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...