How to create Portrait View of Video in Media Manager

Question

I have uploaded video of High Definition resolution (1920X1080) in SDL Media Manager. That video is working fine but it is coming as a landscape video but client wants to show it as a portrait. Is the any option/settings in Media manager from where we can control the mode of video?

Answer 1

Media Manager currently only supports the management of videos in standard aspect ratios; 4:3 and 16:9. It will convert uploaded files to the nearest match (see docs), which is why you are seeing your video as landscape. I think they are working on this for future releases, but the only current option is to ask SDL DevOps to upload your non-standard files manually to the Media Manager CDN.

Answer 2

You can't change the aspect ratio once you've uploaded it into Media Manager. The outlet doesn't offer you an option to change aspect ratio, either.

It is possible using some CSS to "fake" an aspect ratio, though. I've outlined some of those techniques here: http://blog.frankmtaylor.com/2015/05/04/sdl-media-manager-is-now-responsive/ and also here: http://presentations.frankmtaylor.com/sdl-media-manager/#19

Essentially, this amounts to first setting a wrapper around your video with a % padding-bottom, and then setting a container around that with a fixed width:

<div class="container">
    <div class="wrap">
        <script type="text/javascript" language="javascript" src="http://nationwide.dist.sdlmedia.com/Distributions/embed/?o=1F2C97BE-DE64-467C-A6D1-3A5DCFE38215"></script>
    </div>
</div>

.container {
    width: 16em;
}
.wrap {
    position:relative;
    overflow: hidden;
    display: block;
    height: 0;
    padding-bottom: 56.25%;
    border: 2px solid black;
    background: gray;
}

In this example, you've got a 16:9 aspect ratio that is preserved when the width of the container changes. The aspect ratio is controlled by the padding-bottom property, which is a percent. (in CSS, when you use a % measurement, it's relative to computed width of a parent container).

But, this all lets you control width, not height. Unfortunately, CSS specifications dictate that relative units of measure be computed from width, so you're not really going to be able to coerce a 16:9 video into a 9:16 video.

However, it is entirely possible to coerce a video into an 4:4 ratio, which might work as portrait version. Instead of 56.25% of padding-bottom, you could crank it up to 100%: http://jsfiddle.net/Paceaux/zn6mngq3/

But, pay attention to what Media Manager is actually doing! It's attempting to preserve the original aspect ratio of the video, so it will create black bars above and below the video content so that the aspect ratio of the video is preserved. So the video container will change, but the video won't.

This challenge is not endemic to Media Manager, but CSS and web browsers. The browser naturally will do its best to preserve the aspect ratio of any video, regardless of embedding via Media Manager, or a simple HTML5 <video> element.