Skip to main content

How To Change the Aspect Ratio of a Video

If you want your vertical (portrait) video to always display in horizontal (landscape) aspect ratio mode, and show black bars around it inside a 16:9 container, you can follow the instructions below:

  1. Create new variable that overrides aspect ratio of the video
  2. Pass variable to the method run() in the embed code. Assuming that your variable is named vidalyticsCustomSettings, it should be t.run(a, vidalyticsCustomSettings) instead of t.run(a):
<style>
.Tech__wrapper {
background-color: #000;
}
</style>

<script>
var vidalyticsCustomSettings = {
player: {
width: 1920,
height: 1080,
aspectRatio: '16:9'
}
};
</script>

<div id="vidalytics_embed_4c8tpoQ5BS0Tt5DI" style="width: 100%; position:relative; padding-top: 177.94%;"></div>
<script type="text/javascript">
(function (v, i, d, a, l, y, t, c, s) {
y='_'+d.toLowerCase();c=d+'L';if(!v[d]){v[d]={};}if(!v[c]){v[c]={};}if(!v[y]){v[y]={};}var vl='Loader',vli=v[y][vl],vsl=v[c][vl + 'Script'],vlf=v[c][vl + 'Loaded'],ve='Embed';
if (!vsl){vsl=function(u,cb){
if(t){cb();return;}s=i.createElement("script");s.type="text/javascript";s.async=1;s.src=u;
if(s.readyState){s.onreadystatechange=function(){if(s.readyState==="loaded"||s.readyState=="complete"){s.onreadystatechange=null;vlf=1;cb();}};}else{s.onload=function(){vlf=1;cb();};}
i.getElementsByTagName("head")[0].appendChild(s);
};}
vsl(l+'loader.min.js',function(){if(!vli){var vlc=v[c][vl];vli=new vlc();}vli.loadScript(l+'player.min.js',function(){var vec=v[d][ve];t=new vec();t.run(a, vidalyticsCustomSettings);});});
})(window, document, 'Vidalytics', 'vidalytics_embed_4c8tpoQ5BS0Tt5DI', 'https://quick.vidalytics.com/embeds/sXFEYTDU/4c8tpoQ5BS0Tt5DI/');
</script>