{"id":13604,"date":"2023-05-06T05:25:50","date_gmt":"2023-05-06T09:25:50","guid":{"rendered":"https:\/\/buzapps.net\/info\/?post_type=knowledgebase&#038;p=13604"},"modified":"2024-02-18T13:51:39","modified_gmt":"2024-02-18T18:51:39","slug":"customize-the-play-button-on-the-videos-in-the-video-player","status":"publish","type":"knowledgebase","link":"https:\/\/buzapps.net\/info\/knowledgebase\/how-to\/customize-the-play-button-on-the-videos-in-the-video-player\/","title":{"rendered":"Customize the play button on the videos in the Video Player."},"content":{"rendered":"\n<p class=\"wp-block-paragraph\">The below edit will change the play button on your video (YouTube, etc) player.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>1)<\/strong> Log into your App Manager and\u00a0<strong>select your app<\/strong>.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>2)<\/strong>&nbsp;Click&nbsp;<strong>Colors<\/strong>&nbsp;from the left-hand-side of the screen (or the middle of the screen).<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>3)<\/strong>&nbsp;Scroll down to the&nbsp;<strong>Advanced SCSS box<\/strong>.&nbsp;If there is already code in the advanced SCSS box, do not remove it.&nbsp;Start a new line \u201cafter\u201d the last character in the box, then paste the above code.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>YouTube Videos Only<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**BEGIN: CUSTOMIZE YOUTUBE BUTTON ***\/\n.video-view .sprite {\nbackground-size: 15%;\nbackground-position: 96% 80%;\n}\n\/**END: CUSTOMIZE YOUTUBE BUTTON ***\/<\/code><\/pre>\n\n\n\n<div style=\"height:20px\" aria-hidden=\"true\" class=\"wp-block-spacer\"><\/div>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>All Videos <\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>\/**BEGIN: CUSTOMIZE VIDEOS BUTTON ***\/\n.sprite { background-size: 15%; background-position: 96% 80%; } \n\/**BEGIN: CUSTOMIZE VIDEOS BUTTON ***\/<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>NOTE:\u00a0<\/strong>To change the size of your player, you can modify the percentage value\u00a0of \u201c<strong>background-size<\/strong>\u201d with\u00a0your own value. To change the position, you can modify percentage value\u00a0of \u201c<strong>background-position<\/strong>\u201c. The first percentage of \u201cbackground-position\u201d is the left gap, the second is the top gap.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The below edit will change the play button on your video (YouTube, etc) player. 1) Log into your App Manager and\u00a0select your app. 2)&nbsp;Click&nbsp;Colors&nbsp;from the left-hand-side of the screen (or the middle of the screen). 3)&nbsp;Scroll down to the&nbsp;Advanced SCSS box.&nbsp;If there is already code in the advanced SCSS box, do not remove it.&nbsp;Start a new line \u201cafter\u201d the last character in the box, then paste the above code. YouTube Videos Only All Videos NOTE:\u00a0To change the size of your player, you can modify the percentage value\u00a0of \u201cbackground-size\u201d with\u00a0your own value. To change the position, you can modify percentage value\u00a0of<\/p>\n","protected":false},"author":2,"featured_media":0,"comment_status":"closed","ping_status":"closed","template":"","knowledgebase_cat":[35],"class_list":["post-13604","knowledgebase","type-knowledgebase","status-publish","hentry","knowledgebase_cat-how-to"],"_links":{"self":[{"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase\/13604","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase"}],"about":[{"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/types\/knowledgebase"}],"author":[{"embeddable":true,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/comments?post=13604"}],"version-history":[{"count":4,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase\/13604\/revisions"}],"predecessor-version":[{"id":15263,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase\/13604\/revisions\/15263"}],"wp:attachment":[{"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/media?parent=13604"}],"wp:term":[{"taxonomy":"knowledgebase_cat","embeddable":true,"href":"https:\/\/buzapps.net\/info\/wp-json\/wp\/v2\/knowledgebase_cat?post=13604"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}