Centralisation horizontale de la balise vidéo HTML5

Question

Je développe un tableau de bord en utilisant angular.js et il contient plusieurs vidéos. Le tableau de bord permet à l'utilisateur de choisir la taille de chacune des vidéos (petite, moyenne, grande). J'aime centraliser les vidéos, et j'ai essayé plusieurs options (inclus ici: How to center HTML5 Videos?), mais je ne peux pas les faire travailler ... Quelqu'un peut-il m'aider s'il vous plaît?

JS:

$scope.videos = { videosArray: budilVideoArray(), colsize: { small: 'col-md-4', medium: 'col-md-6', large: 'col-md-12'}} 

function buildVideoArray() { 
    return [ 
     { 
     name: 'video1', 
     path: 'src/path/to/video/video1.mp4', 
     size: 'col-md-6' 
    }, 
    { 
     name: 'video2', 
     path: 'src/path/to/video/video2.mp4', 
     size: 'col-md-6' 
    } 
    ] 
} 

$scope.resize = function (video, size) { 
    video.size = $scope.vidos.colsize[size]; 
} 

HTML:

<div ng-repeat="video in videos.videosArray"> 
    <div class="row"> 
    <input type="radio" name="radioButton-{{video.name}}" ng-click="resize(video, 'small')"> small 
    <input type="radio" name="radioButton-{{video.name}}" ng-click="resize(video, 'medium')"> medium 
    <input type="radio" name="radioButton-{{video.name}}" ng-click="resize(video, 'large')"> large 
    </div> 
    <div class="row"> 
    <div ng-class="video.size"> 
     <video class="video_attr" id="{{video.name}}"> 
     <source src="{{video.path}}" type="video/mp4"> 
     </video> 
    </div> 
    </div> 
</div> 

CSS:

.video_attr { 
    width: 100%; 
} 

Answer 1

trouvé ma solution après un certain temps. Voici ce:

HTML:

<div class="row row-center"> 
    <div ng-repeat="video in videos.videosArray" class="{{video.size}} col-center"> 
     <video class="video_attr" id="{{video.name}}" src="{{video.path}}" preload="auto"> </video> 
    </div> 
</div> 

CSS:

.row-center { 
    text-align:center; 
} 
.col-center { 
    display:inline-block; 
    float:none; 
} 
.video_attr { 
    width: 100%; 
}