videogular には別の問題があります。ストレッチモードがうまくいきません。
<videogular class="videogular" vg-width="controller.config.width" vg-height="controller.config.height" vg-theme="controller.config.theme" vg-responsive="true" vg-video-stretch="controller.config.stretch.value" vg-stretch="controller.config.stretch.value" vg-player-ready="controller.onPlayerReady($API)" vg-update-state="controller.onUpdateState($state)" vg-update-time="controller.onUpdateTime($currentTime, $duration)">
<vg-media vg-src="controller.config.sources" vg-native-controls="false" >
<video preload='metadata'></video>
</vg-media>
<vg-buffering class="vg-buffering"><div class="bufferingContainer"><div ng-class="spinnerClass" class="loadingSpinner"></div></div></vg-buffering>
</videogular>
そしてジャバスクリプト。
var setupVideo = function( ){
$scope.stretchModes = [
{label: "None", value: "none"},
{label: "Fit", value: "fit"},
{label: "Fill", value: "fill"}
];
controller.config = {
sources: [
{src: $sce.trustAsResourceUrl("video/" + _fileName + ".mp4"), type: "video/mp4"},
{src: $sce.trustAsResourceUrl("video/" + _fileName + ".webm"), type: "video/webm"},
{src: $sce.trustAsResourceUrl("video/" + _fileName + ".ogg"), type: "video/ogg"}
],
width: 1366,
height: 768,
responsive: true,
autoPlay: false,
stretch: $scope.stretchModes[2],
theme: "css/plugins/videogular.min.css",
transclude: true
};
}
「フィット」または「ストレッチ」のいずれかを使用して、コンテナーにうまく収まるようにする必要があります。