Azure Media Player - Responsive View

Question

I'm trying to make my video responsive and get rid of the extra height above and below the video.
(Note the black background in the screenshot)

HTML:

<div class="video-embed-container">  
<video id="vid1" class="video-embed azuremediaplayer amp-default-skin" autoplay controls width="640" height="400" poster="poster.jpg" data-setup='{"nativeControlsForTouch": false}'>  
        <source src="http://amssamples.streaming.mediaservices.windows.net/91492735-c523-432b-ba01-faba6c2206a2/AzureMediaServicesPromo.ism/manifest" type="application/vnd.ms-sstr+xml" />  
        <p class="amp-no-js">  
            To view this video please enable JavaScript, and consider upgrading to a web browser that supports HTML5 video  
        </p>  
    </video>  
</div>  

CSS

.video-embed-container {  
    position: relative;  
}  
  
.video-embed {  
    position: absolute;  
    top: 0;  
    left: 0;  
    width: 100%;  
    height: 100%;  
}  
  

The code above doesn't work, especially for the height. Whenever I specify a height, the video disappears from view.

Answer 1

@cyn , Thanks for sharing the video URLs. We have tried both the streaming URL in AMP and the page URL, we did not see any black borders.

After further analysis, the black borders are not part of the video being streamed, looks they are being generated by the browser player. See reference the html 5 spec.

"In the absence of style rules to the contrary, 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."

If you specify fixed width and height for the video element, then those must match the aspect ratio of the video content.

To make the video player "responsive” and self-adjust to whatever video aspect ratio, then you must use something like this: responsive web design -videos.

Note: This post contains 3rd-party sites for your reference only.

--

To benefit the community find the right answers, please do mark the post which was helpful by clicking on ‘Accept Answer’ & ‘Up-Vote’.