Horizontal centralization of HTML5 video tag
<p>I am developing a dashboard, using angular.js and it contains of several videos. The dashboard allows the user to choose which size each of the videos should be in (small, medium, large). I like to centralize the videos, and have tried severals options (included here: <a href="https://stackoverflow.com/questions/5879209/how-to-center-html5-videos">How to center HTML5 Videos?</a>) , but cannot make any of them work... Can someone please help me? </p>

<p>JS: </p>

<pre><code>$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];
}
</code></pre>

<p>HTML: </p>

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

<p>CSS:</p>

<pre><code>.video_attr {
  width: 100%;
}
</code></pre>