Delete white spaces on html5 video tag in Ionic

I have a video tag in my Ionic app, video element is added after click on a button. 

function addVideo(videoId){
        var path = $scope.getVideo(videoId).newVideoLocation.nativeURL;
        path = $sce.trustAsResourceUrl(path);

        var container = document.getElementById('videoContainer' + videoId);
        var video =  document.createElement('video');

        video.src = path;
        video.setAttribute('id', 'video' + videoId);
        video.setAttribute('poster', $scope.getVideo(videoId).thumbnailPath);
        video.setAttribute('width', '100%');

        container.appendChild(video);
    };

Video is added successfully but there are bottom and top white spaces / bars:

enter image description here

After click play button spaces are no longer there:

enter image description here

I set border to all elements to know what is happening. Blue border is video tag:

enter image description here

It could be margin o padding however I set them to 0:

* {
    border: 1px solid red !important;
  }

  video {
    border: 2px solid blue !important;
    margin: 0;
    padding: 0;
  }

Any idea what is the problem?

After a lot of research I found a solution.

I start understanding what happened after read HTML 5 Video stretch post:

Video content should be rendered inside the element's playback area such that the video content is shown centered in the playback area at the largest possible size that fits completely within it, with the video content's aspect ratio being preserved. Thus, if the aspect ratio of the playback area does not match the aspect ratio of the video, the video will be shown letterboxed or pillarboxed. Areas of the element's playback area that do not contain the video represent nothing.

Then in google books I found and explanation how works video width, the book is call The Definitive Guide to HTML5 Video

If width and height are not same aspect ratio as original video it doesn't work. Set a 100% to width doesn't mean you want video to fit the container. So I decided to calculate width and height of the container and set to video element:

function addVideo(videoId){
    var path = getTrustUrl($scope.getVideo(videoId).newVideoLocation.nativeURL);

    // Create container element and get padding 
    var container = document.getElementById('videoContainer' + videoId);
    var paddingLeft = window.getComputedStyle(container, null).getPropertyValue('padding-left');
    var paddingRight = window.getComputedStyle(container, null).getPropertyValue('padding-right');

    // Get only numeric part and parse to integer
    paddingLeft = parseInt(paddingLeft.slice(0,-2));
    paddingRight = parseInt(paddingRight.slice(0,-2));

    //Get internal width of container and calculate height
    var width = container.offsetWidth - paddingLeft - paddingRight;
    var height = (width * 9 ) / 16; // TODO, if not 16:9 error

    // Create video element and set attributes
    var video =  document.createElement('video');
    video.src = path;
    video.setAttribute('id', 'video' + videoId);
    video.setAttribute('poster', $scope.getVideo(videoId).thumbnailPath);
    video.setAttribute('width', width);
    video.setAttribute('height', height);

    // Append video to container
    container.appendChild(video);
};

I don't see it straightforward... if someone know another solution let me know!