0
画像、動画、およびその他のリンクをライトボックスに表示するには、angle-bootstrap-lightboxを使用しましたが、動画は動作しません。ビデオを表示する代わりに、テキスト "Watch Video"が表示され、それをクリックするとリンクに移動します。アングルライトボックスにビデオが表示されないのはなぜですか？画像は動作しますが動画はありません
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;
});
ホープ誰も私を助けることができる：ここではplunkerです。
ビデオを埋め込んでいません。あなたはそれにリンクしているだけです。 –
@ChrisStanley - まだ動作しません。プランナーのリンクを埋め込みビデオに変更しましたが、運はありません。 – Octtavius
リンクはそれだけです：リンク。それをクリックすると、そのURLに移動します。私が言っているのは、ビデオを埋めなければならないということです。のように、あなたはそれへのリンクを作成することはできません、または単にビデオに移動します。あなたはあなたのページにビデオを表示するためにiframeを利用するyoutube埋め込みを利用する必要があります。 –