Apparent Issue- Black line appearing on the sides of the player/ Huge black margins on videos
Cause- The back bars appear on the player because the aspect ratio of the video doesn’t match the video aspect ratio of the player. (e.g 4:3 aspect ratio of the video and 16:9 aspect ratio of the video player).
Fix- There will be black bars on online players until the aspect ratio (height/width) of the video exactly matches the aspect ratio (height/width) of the player (e.g 16:9 video with 16:9 video player). Hence, In order to remove any back lines on the video, please set the same aspect ratio (height/width) of the video and the player.
Which might not be the case always. The player aspect ratio on an embedded page is decided by you, you can change the height and width of the player to match the aspect ratio of the video. But in case, different videos have a different aspect ratio, then the same player size can’t satisfy all.
Also, in a full-screen scenario, different devices have different aspect ratios and thus for a single video, some devices will show black bars.
Thus, this is not an issue but a normal adjustment. Some offline players like VLC stretch video to remove black bars, but stretched video stretches text and face; thus is considered a poor video experience.
Below are the details for adjusting the height and width of the video player.
1- Iframe
The height and width of the player can be adjusted by configuring the values of height & width in the Generated Iframe.
Below is a sample iframe highlighting the section that can be configured to adjust height and width of a video:
<iframe src="https://player.vdocipher.com/v2/?otp=20160313versUSE323ppx3dMajVOkBdIfBPf4kj8kMb9oblOaY6DGx8uVKaf9zCx&playbackInfo=eyJ2aWRlb0lkIjoiOTZiYjg5ODcwZmI4NDRmYTkyYzk4MDcyYTU5YTI2OTkifQ=="
style="border:0;height:360px;width:640px;max-width:100%" allowFullScreen="true" allow="encrypted-media"></iframe>
2- Word press
For WordPress, you can change the size of the player and make the Height to width ratio the same as the actual video by adding the height and width parameter to the shortcodes as mentioned below
Sample shortcode - [vdoid= "id_of_video" width="600" and height="400"]
3- API
If using player API, then the height and width can be adjusted by modifying the VdoPlayer embed code.
Below is a sample VdoPlayer Embed code highlighting the section that can be configured to adjust height and width of a video:
<div id="embedBox" style="width:1280px;max-width:100%;height:auto;"></div> <script> (function(v,i,d,e,o){v[o]=v[o]||{}; v[o].add = v[o].add || function V(a){ (v[o].d=v[o].d||[]).push(a);}; if(!v[o].l) { v[o].l=1*new Date(); a=i.createElement(d), m=i.getElementsByTagName(d)[0]; a.async=1; a.src=e; m.parentNode.insertBefore(a,m);} })(window,document,"script","https://cdn-gce.vdocipher.com/playerAssets/1.6.10/vdo.js","vdo"); vdo.add({ otp: "REPLACE WITH OTP", playbackInfo: "REPLACE WITH PLAYBACKINFO", theme: "9ae8bbe8dd964ddc9bdb932cca1cb59a", container: document.querySelector( "#embedBox" ), }); </script>
Supercharge Your Business with Videos
At VdoCipher we maintain the strongest content protection for videos. We also deliver the best viewer experience with brand friendly customisations. We'd love to hear from you, and help boost your video streaming business.
