{"id":75701,"date":"2016-09-13T10:45:28","date_gmt":"2016-09-13T14:45:28","guid":{"rendered":"http:\/\/www.templatemonster.com\/help\/?p=75701"},"modified":"2016-10-07T09:39:14","modified_gmt":"2016-10-07T13:39:14","slug":"cherryframework-3-how-to-activate-full-screen-option-on-player","status":"publish","type":"post","link":"https:\/\/www.templatemonster.com\/help\/cherryframework-3-how-to-activate-full-screen-option-on-player.html","title":{"rendered":"CherryFramework 3. How to activate full screen option on player"},"content":{"rendered":"<div class=\"video-container\">\r\n\t<iframe src=\"https:\/\/www.youtube.com\/embed\/EZPCUQWryo0\"><\/iframe>\r\n<\/div>\r\n<p>To add a <strong>Fullscreen button<\/strong> onto player, please, perform following steps:<\/p>\r\n<ol>\r\n<li><p>Connect to your <i>FTP<\/i> or open the hosting control panel <i>File manager<\/i> tool.<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/09\/CherryFramework_3_How_to_activate_full_screen_option_on_player_img_2.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/09\/CherryFramework_3_How_to_activate_full_screen_option_on_player_img_2-300x112.png\" alt=\"CherryFramework_3_How_to_activate_full_screen_option_on_player_img_2\" width=\"300\" height=\"112\" class=\"alignnone size-medium wp-image-75703\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/CherryFramework_3_How_to_activate_full_screen_option_on_player_img_2-300x112.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/CherryFramework_3_How_to_activate_full_screen_option_on_player_img_2-150x56.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/CherryFramework_3_How_to_activate_full_screen_option_on_player_img_2-768x286.png 768w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/CherryFramework_3_How_to_activate_full_screen_option_on_player_img_2-1024x381.png 1024w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/CherryFramework_3_How_to_activate_full_screen_option_on_player_img_2.png 1568w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n<li><p>Navigate to <strong>wp-content\/themes\/CherryFramework\/includes<\/strong> folder and download <strong>theme-function.php<\/strong> file.<\/p><\/li>\r\n<li><p>Open it with any text editor and add into following code, aprox. to the line 579<\/p>\r\n\r\n<pre class=\"brush:html\">\r\n&lt;ul class=&quot;jp-toggles&quot;&gt;\r\n&lt;li&gt;&lt;a href=&quot;javascript:;&quot; class=&quot;jp-mute&quot; tabindex=&quot;1&quot; title=&quot;&lt;?php echo theme_locals(&quot;mute&quot;)?&gt;&quot;&gt;&lt;span&gt;&lt;?php echo theme_locals(&quot;mute&quot;) ?&gt;&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;li&gt;&lt;a href=&quot;javascript:;&quot; class=&quot;jp-unmute&quot; tabindex=&quot;1&quot; title=&quot;&lt;?php echo theme_locals(&quot;unmute&quot;)?&gt;&quot;&gt;&lt;span&gt;&lt;?php echo theme_locals(&quot;unmute&quot;) ?&gt;&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;\/ul&gt;\r\n<\/pre>\r\n\r\n<p>this line of code:<\/p>\r\n\r\n<pre class=\"brush:html\">\r\n&lt;li&gt;&lt;a href=&quot;javascript:;&quot; class=&quot;jp-full-screen&quot; tabindex=&quot;1&quot; title=&quot;&lt;?php echo theme_locals(&quot;fullwidth&quot;)?&gt;&quot;&gt;&lt;span&gt;&lt;?php echo theme_locals(&quot;fullwidth&quot;) ?&gt;&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n<\/pre>\r\n\r\n<p>Result would be:<\/p>\r\n\r\n<pre class=\"brush:html\">\r\n &lt;ul class=&quot;jp-toggles&quot;&gt;\r\n&lt;li&gt;&lt;a href=&quot;javascript:;&quot; class=&quot;jp-mute&quot; tabindex=&quot;1&quot; title=&quot;&lt;?php echo theme_locals(&quot;mute&quot;)?&gt;&quot;&gt;&lt;span&gt;&lt;?php echo theme_locals(&quot;mute&quot;) ?&gt;&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;li&gt;&lt;a href=&quot;javascript:;&quot; class=&quot;jp-unmute&quot; tabindex=&quot;1&quot; title=&quot;&lt;?php echo theme_locals(&quot;unmute&quot;)?&gt;&quot;&gt;&lt;span&gt;&lt;?php echo theme_locals(&quot;unmute&quot;) ?&gt;&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;li&gt;&lt;a href=&quot;javascript:;&quot; class=&quot;jp-full-screen&quot; tabindex=&quot;1&quot; title=&quot;&lt;?php echo theme_locals(&quot;fullwidth&quot;)?&gt;&quot;&gt;&lt;span&gt;&lt;?php echo theme_locals(&quot;fullwidth&quot;) ?&gt;&lt;\/span&gt;&lt;\/a&gt;&lt;\/li&gt;\r\n&lt;\/ul&gt;\r\n<\/pre>\r\n<\/li>\r\n\r\n<li><p>Save file and replace on server.<\/p><\/li>\r\n<li><p>Open your <i>style.css<\/i> file and add the following css rule to the bottom of the file:<\/p>\r\n<pre class=\"brush:css\">\r\ndiv.jp-volume-bar { \r\nright: 34px !important; \r\n}\r\n<\/pre>\r\n<\/li>\r\n<li><p>Save file and replace on server.<\/p><\/li>\r\n<li><p>Check your site.<\/p>\r\n\r\n<a class=\"darkbox\" href=\"\/help\/wp-content\/uploads\/2016\/09\/CherryFramework_3_How_to_activate_full_screen_option_on_player_img_1.png\"><img loading=\"lazy\" src=\"\/help\/wp-content\/uploads\/2016\/09\/CherryFramework_3_How_to_activate_full_screen_option_on_player_img_1-300x171.png\" alt=\"CherryFramework_3_How_to_activate_full_screen_option_on_player_img_1\" width=\"300\" height=\"171\" class=\"alignnone size-medium wp-image-75702\" srcset=\"https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/CherryFramework_3_How_to_activate_full_screen_option_on_player_img_1-300x171.png 300w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/CherryFramework_3_How_to_activate_full_screen_option_on_player_img_1-150x85.png 150w, https:\/\/www.templatemonster.com\/help\/wp-content\/uploads\/2016\/09\/CherryFramework_3_How_to_activate_full_screen_option_on_player_img_1.png 684w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a>\r\n<\/li>\r\n<\/ol>\r\n<p>Feel free to check the detailed video tutorial below:<\/p>\r\n<a href=\"http:\/\/www.youtube.com\/watch?v=EZPCUQWryo0?width=1280&amp;height=720\" rel=\"prettyPhoto\">CherryFramework 3. How to activate full screen option on player<\/a>\r\n<p>Also, take a look at the collection of <a href=\"https:\/\/www.templatemonster.com\/wordpress-themes.php\" target=\"_blank\">premium WordPress themes.<\/a><\/p>","protected":false},"excerpt":{"rendered":"<p>This tutorial shows how to activate full screen option on player in CherryFramework3 templates.<\/p>\n","protected":false},"author":89,"featured_media":75704,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[728],"tags":[2097,2458,820],"_links":{"self":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/75701"}],"collection":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/users\/89"}],"replies":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/comments?post=75701"}],"version-history":[{"count":0,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/posts\/75701\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media\/75704"}],"wp:attachment":[{"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/media?parent=75701"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/categories?post=75701"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.templatemonster.com\/help\/wp-json\/wp\/v2\/tags?post=75701"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}