{"id":8251,"date":"2021-07-04T16:20:28","date_gmt":"2021-07-04T16:20:28","guid":{"rendered":"https:\/\/www.vdocipher.com\/blog\/?page_id=8251"},"modified":"2025-12-08T08:11:39","modified_gmt":"2025-12-08T08:11:39","slug":"black-line-coming-sides-player-videos","status":"publish","type":"page","link":"https:\/\/www-uat.vdocipher.com\/blog\/black-line-player\/","title":{"rendered":"Black line coming on the sides of the player on videos"},"content":{"rendered":"<p><strong>Apparent Issue-<\/strong> Black line appearing on the sides of the player\/ Huge black margins on videos<\/p>\n<p><b>Cause- <\/b>The back bars appear on the player because the aspect ratio of the video doesn\u2019t match the <a href=\"https:\/\/www.vdocipher.com\/blog\/video-aspect-ratio\/\">video aspect ratio<\/a> of the player. (e.g 4:3 aspect ratio of the video and 16:9 aspect ratio of the video player). <br \/>\n <br \/>\n<b>Fix- <\/b>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). <b>Hence, In order to remove any back lines on the video, please set the same aspect ratio <\/b><b>(height\/width)<\/b><b> of the video and the player.<\/b><\/p>\n<p>Which might not be the case always.\u00a0 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&#8217;t satisfy all.\u00a0<\/p>\n<p>Also, in a full-screen scenario, different devices have different aspect ratios and thus for a single video, some devices will show black bars.<\/p>\n<p>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.<b><br \/>\n<\/b><\/p>\n<p><br \/>\nBelow are the details for adjusting the height and width of the video player.<\/p>\n<p><b>1- Iframe<\/b><b><br \/>\n<\/b>The height and width of the player can be adjusted by configuring the values of height &amp; width in the Generated Iframe.<br \/>\nBelow is a sample iframe highlighting the section that can be configured to adjust height and width of a video:<\/p>\n<pre>&lt;iframe src=\"https:\/\/player.vdocipher.com\/v2\/?otp=20160313versUSE323ppx3dMajVOkBdIfBPf4kj8kMb9oblOaY6DGx8uVKaf9zCx&amp;playbackInfo=eyJ2aWRlb0lkIjoiOTZiYjg5ODcwZmI4NDRmYTkyYzk4MDcyYTU5YTI2OTkifQ==\"\r\nstyle=\"border:0;<strong><span style=\"color: #008000;\">height:360px;width:640px<\/span><\/strong>;max-width:100%\" allowFullScreen=\"true\" allow=\"encrypted-media\"&gt;&lt;\/iframe&gt;<\/pre>\n<p><a href=\"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2021\/06\/Iframe-1.jpg\"><img loading=\"lazy\" decoding=\"async\" class=\"size-large wp-image-7663 aligncenter\" src=\"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2021\/06\/Iframe-1-1024x482.jpg\" alt=\"\" width=\"702\" height=\"330\" srcset=\"https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2021\/06\/Iframe-1-1024x482.jpg 1024w, https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2021\/06\/Iframe-1-300x141.jpg 300w, https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2021\/06\/Iframe-1-768x362.jpg 768w, https:\/\/www-uat.vdocipher.com\/blog\/wp-content\/uploads\/2021\/06\/Iframe-1.jpg 1385w\" sizes=\"auto, (max-width: 702px) 100vw, 702px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><b>2- Word press <\/b><b><br \/>\n<\/b>For WordPress, you can\u00a0 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\u00a0<\/p>\n<pre>Sample shortcode - [vdoid= \"id_of_video\" width=\"600\" and height=\"400\"]<\/pre>\n<p><br \/>\n<br \/>\n<b>3- API<\/b><br \/>\nIf using player API, then the height and width can be adjusted by modifying the <a href=\"https:\/\/www.vdocipher.com\/docs\/player\/v2\/\">VdoPlayer embed code.<br \/>\n<\/a>Below is a sample <a href=\"https:\/\/www.vdocipher.com\/docs\/player\/v2\/\">VdoPlayer Embed code<\/a> highlighting the section that can be configured to adjust height and width of a video:<br \/>\n<\/p>\n<pre><span class=\"token-line\"><span class=\"token tag punctuation\">&lt;<\/span><span class=\"token tag\">iframe<\/span>\r\n<\/span><span class=\"token-line\"> <span class=\"token tag attr-name\">src<\/span><span class=\"token tag attr-value punctuation attr-equals\">=<\/span><span class=\"token tag attr-value punctuation\">\"<\/span><span class=\"token tag attr-value\">https:\/\/player.vdocipher.com\/v2\/?otp=[[REPLACE_WITH_OTP]]&amp;playbackInfo=[[REPLACE_WITH_PLAYBACKINFO]]<\/span><span class=\"token tag attr-value punctuation\">\"<\/span>\r\n<\/span><span class=\"token-line\"> <span class=\"token tag special-attr attr-name\">style<\/span><span class=\"token tag special-attr attr-value punctuation attr-equals\">=<\/span><span class=\"token tag special-attr attr-value punctuation\">\"<\/span><span class=\"token tag special-attr attr-value value css language-css property\">border<\/span><span class=\"token tag special-attr attr-value value css language-css punctuation\">:<\/span><span class=\"token tag special-attr attr-value value css language-css number\">0<\/span><span class=\"token tag special-attr attr-value value css language-css punctuation\">;<\/span><span class=\"token tag special-attr attr-value value css language-css property\">width<\/span><span class=\"token tag special-attr attr-value value css language-css punctuation\">:<\/span><span class=\"token tag special-attr attr-value value css language-css number\">720<\/span><span class=\"token tag special-attr attr-value value css language-css unit\">px<\/span><span class=\"token tag special-attr attr-value value css language-css punctuation\">;<\/span><span class=\"token tag special-attr attr-value value css language-css property\">height<\/span><span class=\"token tag special-attr attr-value value css language-css punctuation\">:<\/span><span class=\"token tag special-attr attr-value value css language-css number\">405<\/span><span class=\"token tag special-attr attr-value value css language-css unit\">px<\/span><span class=\"token tag special-attr attr-value punctuation\">\"<\/span>\r\n<\/span><span class=\"token-line\"> <span class=\"token tag attr-name\">allow<\/span><span class=\"token tag attr-value punctuation attr-equals\">=<\/span><span class=\"token tag attr-value punctuation\">\"<\/span><span class=\"token tag attr-value\">encrypted-media<\/span><span class=\"token tag attr-value punctuation\">\"<\/span>\r\n<\/span><span class=\"token-line\"> <span class=\"token tag attr-name\">allowfullscreen<\/span>\r\n<\/span><span class=\"token-line\"><span class=\"token tag punctuation\">&gt;<\/span><span class=\"token tag punctuation\">&lt;\/<\/span><span class=\"token tag\">iframe<\/span><span class=\"token tag punctuation\">&gt;<\/span><\/span><\/pre>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>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\u2019t 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). [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"categories":[],"tags":[],"class_list":{"0":"post-8251","1":"page","2":"type-page","3":"status-publish","5":"entry"},"yoast_head":"<!-- This site is optimized with the Yoast SEO Premium plugin v20.0 (Yoast SEO v26.9) - https:\/\/yoast.com\/product\/yoast-seo-premium-wordpress\/ -->\n<title>Black line coming on the sides of the player on videos - VdoCipher Blog<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.vdocipher.com\/blog\/black-line-player\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Black line coming on the sides of the player on videos\" \/>\n<meta property=\"og:description\" content=\"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\u2019t 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). [&hellip;]\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.vdocipher.com\/blog\/black-line-player\/\" \/>\n<meta property=\"og:site_name\" content=\"VdoCipher Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/vdociphertech\/\" \/>\n<meta property=\"article:modified_time\" content=\"2025-12-08T08:11:39+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2021\/06\/Iframe-1-1024x482.jpg\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:site\" content=\"@vdocipher\" \/>\n<meta name=\"twitter:label1\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data1\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.vdocipher.com\/blog\/black-line-player\/\",\"url\":\"https:\/\/www.vdocipher.com\/blog\/black-line-player\/\",\"name\":\"Black line coming on the sides of the player on videos - VdoCipher Blog\",\"isPartOf\":{\"@id\":\"https:\/\/www.vdocipher.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.vdocipher.com\/blog\/black-line-player\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.vdocipher.com\/blog\/black-line-player\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2021\/06\/Iframe-1-1024x482.jpg\",\"datePublished\":\"2021-07-04T16:20:28+00:00\",\"dateModified\":\"2025-12-08T08:11:39+00:00\",\"breadcrumb\":{\"@id\":\"https:\/\/www.vdocipher.com\/blog\/black-line-player\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.vdocipher.com\/blog\/black-line-player\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vdocipher.com\/blog\/black-line-player\/#primaryimage\",\"url\":\"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2021\/06\/Iframe-1-1024x482.jpg\",\"contentUrl\":\"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2021\/06\/Iframe-1-1024x482.jpg\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.vdocipher.com\/blog\/black-line-player\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.vdocipher.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Black line coming on the sides of the player on videos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.vdocipher.com\/blog\/#website\",\"url\":\"https:\/\/www.vdocipher.com\/blog\/\",\"name\":\"VdoCipher Blog\",\"description\":\"Secure Video Streaming\",\"publisher\":{\"@id\":\"https:\/\/www.vdocipher.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.vdocipher.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.vdocipher.com\/blog\/#organization\",\"name\":\"VdoCipher\",\"url\":\"https:\/\/www.vdocipher.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.vdocipher.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2016\/11\/VdoCipher-logo2.png\",\"contentUrl\":\"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2016\/11\/VdoCipher-logo2.png\",\"width\":1625,\"height\":1925,\"caption\":\"VdoCipher\"},\"image\":{\"@id\":\"https:\/\/www.vdocipher.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/vdociphertech\/\",\"https:\/\/x.com\/vdocipher\",\"https:\/\/www.linkedin.com\/company\/vdocipher\"]}]}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"Black line coming on the sides of the player on videos - VdoCipher Blog","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.vdocipher.com\/blog\/black-line-player\/","og_locale":"en_US","og_type":"article","og_title":"Black line coming on the sides of the player on videos","og_description":"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\u2019t 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). [&hellip;]","og_url":"https:\/\/www.vdocipher.com\/blog\/black-line-player\/","og_site_name":"VdoCipher Blog","article_publisher":"https:\/\/www.facebook.com\/vdociphertech\/","article_modified_time":"2025-12-08T08:11:39+00:00","og_image":[{"url":"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2021\/06\/Iframe-1-1024x482.jpg","type":"","width":"","height":""}],"twitter_card":"summary_large_image","twitter_site":"@vdocipher","twitter_misc":{"Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.vdocipher.com\/blog\/black-line-player\/","url":"https:\/\/www.vdocipher.com\/blog\/black-line-player\/","name":"Black line coming on the sides of the player on videos - VdoCipher Blog","isPartOf":{"@id":"https:\/\/www.vdocipher.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.vdocipher.com\/blog\/black-line-player\/#primaryimage"},"image":{"@id":"https:\/\/www.vdocipher.com\/blog\/black-line-player\/#primaryimage"},"thumbnailUrl":"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2021\/06\/Iframe-1-1024x482.jpg","datePublished":"2021-07-04T16:20:28+00:00","dateModified":"2025-12-08T08:11:39+00:00","breadcrumb":{"@id":"https:\/\/www.vdocipher.com\/blog\/black-line-player\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.vdocipher.com\/blog\/black-line-player\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vdocipher.com\/blog\/black-line-player\/#primaryimage","url":"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2021\/06\/Iframe-1-1024x482.jpg","contentUrl":"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2021\/06\/Iframe-1-1024x482.jpg"},{"@type":"BreadcrumbList","@id":"https:\/\/www.vdocipher.com\/blog\/black-line-player\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.vdocipher.com\/blog\/"},{"@type":"ListItem","position":2,"name":"Black line coming on the sides of the player on videos"}]},{"@type":"WebSite","@id":"https:\/\/www.vdocipher.com\/blog\/#website","url":"https:\/\/www.vdocipher.com\/blog\/","name":"VdoCipher Blog","description":"Secure Video Streaming","publisher":{"@id":"https:\/\/www.vdocipher.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.vdocipher.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.vdocipher.com\/blog\/#organization","name":"VdoCipher","url":"https:\/\/www.vdocipher.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.vdocipher.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2016\/11\/VdoCipher-logo2.png","contentUrl":"https:\/\/www.vdocipher.com\/blog\/wp-content\/uploads\/2016\/11\/VdoCipher-logo2.png","width":1625,"height":1925,"caption":"VdoCipher"},"image":{"@id":"https:\/\/www.vdocipher.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/vdociphertech\/","https:\/\/x.com\/vdocipher","https:\/\/www.linkedin.com\/company\/vdocipher"]}]}},"yoast":{"focuskw":"","title":"","metadesc":"","linkdex":"","metakeywords":"","meta-robots-noindex":"","meta-robots-nofollow":"","meta-robots-adv":"","canonical":"","redirect":"","opengraph-title":"","opengraph-description":"","opengraph-image":"","twitter-title":"","twitter-description":"","twitter-image":""},"_links":{"self":[{"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/pages\/8251","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/comments?post=8251"}],"version-history":[{"count":8,"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/pages\/8251\/revisions"}],"predecessor-version":[{"id":20642,"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/pages\/8251\/revisions\/20642"}],"wp:attachment":[{"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/media?parent=8251"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/categories?post=8251"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www-uat.vdocipher.com\/blog\/wp-json\/wp\/v2\/tags?post=8251"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}