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:
- Create new variable that overrides aspect ratio of the video
- Pass variable to the method
run()
in the embed code. Assuming that your variable is namedvidalyticsCustomSettings
, it should bet.run(a, vidalyticsCustomSettings)
instead oft.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>