Почему видео не отображается в angular lightbox? Изображения работают, но видео не

Я использовал angular-bootstrap-lightbox для отображения изображений, видео и других ссылок в lightbox, но видео не работают. Вместо отображения видео, появляется текст «смотреть видео» и при нажатии на него, он приводит меня к ссылке. Вот планкер:

http://plnkr.co/edit/g0jSl3WW36jGMYf3VNgz?p=preview

<!doctype html>
<html ng-app="demo1">
<head>
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-bootstrap-lightbox/0.12.0/angular-bootstrap-lightbox.css">
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
  <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
  <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.3.2.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-bootstrap-lightbox/0.12.0/angular-bootstrap-lightbox.js"></script>

  <script src="script.js"></script>
  <link href="//netdna.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
  <link rel="stylesheet" href="angular-bootstrap-lightbox.css">
  <link rel="stylesheet" href="style.css">
</head>

<body>
    <ul class="gallery gallery1" ng-controller="GalleryCtrl">
      <li ng-repeat="image in tiles">
        <a ng-click="Lightbox.openModal(tiles, $index)">
          <p  ng-src="{{image.url}}">{{image.title}}</p>
      </a>
    </li>
  </ul>
</body>

JS

var app = angular.module('demo1', ['bootstrapLightbox']);

app.controller('GalleryCtrl', function ($scope, Lightbox) {

       var images = {
            name: "User 1",
            tiles: [{
                    'url': 'https://farm8.staticflickr.com/7300/12807911134_ff56d1fb3b_b.jpg',
                    'thumbUrl': 'https://farm8.staticflickr.com/7300/12807911134_ff56d1fb3b_s.jpg',
                    'title': "An Image"
                },
                {
                    'type': 'video',
                    'url': 'https://www.youtube.com/watch?v=Nfq3OC6B-CU',
                'thumbUrl': 'https://www.youtube.com/watch?v=Nfq3OC6B-CU',
                    'title': 'A Video'
                },
                {
                    'url': 'https://farm8.staticflickr.com/7300/12807911134_ff56d1fb3b_b.jpg',
                    'thumbUrl': 'https://farm8.staticflickr.com/7300/12807911134_ff56d1fb3b_s.jpg',
                    'title': ' An Image'
                },
                {
                    'type': 'video',
                    'url': 'https://www.youtube.com/watch?v=Nfq3OC6B-CU',
                    'thumbUrl': 'https://farm1.staticflickr.com/400/20228789791_52fb84917f_s.jpg',
                    'caption': 'The left and right arrow keys are binded for navigation. The escape key for closing the modal is binded by AngularUI Bootstrap.',
                'title': 'A Video'
                }

            ]}

    $scope.tiles = images.tiles;

    $scope.Lightbox = Lightbox;

});

Надеюсь, кто-нибудь сможет мне помочь.

2 ответа

  1. Используйте встроенный url, тогда он работает

    'url': 'https://www.youtube.com/embed/Nfq3OC6B-CU'
    

    вместо

    'url': 'https://www.youtube.com/watch?v=Nfq3OC6B-CU'
    
  2. Вы сделали две ошибки легко разрешимые:

    • Модуль контроллера предназначен для demo5, а ваше приложение-для demo1.
    • Как показано в angular-bootstrap-lightbox Github, если вы хотите встроить видео, вам нужно использовать сценарий ng-videosharing-embed.