{"id":2675,"date":"2012-05-02T03:48:16","date_gmt":"2012-05-02T03:48:16","guid":{"rendered":"http:\/\/2slick.com\/web\/?p=2675"},"modified":"2012-05-03T20:42:41","modified_gmt":"2012-05-03T20:42:41","slug":"customize-youtube","status":"publish","type":"post","link":"https:\/\/2slick.com\/web\/customize-youtube\/affordablewebsitestips\/tutorials","title":{"rendered":"Customize YouTube"},"content":{"rendered":"<h3>Customize YouTube video using embed markup<\/h3>\n<p>Here is your standard iframe YouTube.com video code embed snippet:<br \/>\n<!--DEVFMTCODE--><pre class=\"devcodeblock\" title=\"Javascript\"><table class=\"devcodetools\"><tbody><tr><td>&nbsp;Javascript&nbsp;|&nbsp;<\/td><td style=\"background-image:url('https:\/\/2slick.com\/web\/wp-content\/plugins\/devformatter\/img\/devformatter-copy.png');background-repeat:no-repeat;background-position:50% 50%;width:16px;height:16px;\"\/><embed id=\"ZeroClipboard1\" src=\"https:\/\/2slick.com\/web\/wp-content\/plugins\/devformatter\/_zclipboard.swf\" loop=\"false\" menu=\"false\" quality=\"best\" bgcolor=\"#ffffff\" width=\"16px\" height=\"16px\" align=\"middle\" allowScriptAccess=\"always\" allowFullScreen=\"false\" type=\"application\/x-shockwave-flash\" pluginspage=\"http:\/\/www.macromedia.com\/go\/getflashplayer\" flashvars=\"id=1&width=16&height=16\" wmode=\"transparent\" \/><\/td><td>&nbsp;copy&nbsp;code&nbsp;|<\/td><td style=\"cursor:pointer\" title=\"DevFormatter Plugin\" onclick=\"devfmt_credits()\">?<\/td><td width=\"99%\">&nbsp;<\/td><\/tr><\/tbody><\/table><div class=\"devcodeoverflow\"><table class=\"devcodearea\" width=\"100%\"><tr><td class=\"devcodelines\" width=\"1%\">1<\/td><td class=\"devcodelinesarea\"><pre class=\"devcode devcodeline\"><span style=\"color: #339933;\">&lt;<\/span>iframe width<span style=\"color: #339933;\">=<\/span><span style=\"color: #3366CC;\">&quot;560&quot;<\/span> height<span style=\"color: #339933;\">=<\/span><span style=\"color: #3366CC;\">&quot;315&quot;<\/span> src<span style=\"color: #339933;\">=<\/span><span style=\"color: #3366CC;\">&quot;http:\/\/www.youtube.com\/embed\/qnRYpnh6IsY?rel=0&quot;<\/span> frameborder<span style=\"color: #339933;\">=<\/span><span style=\"color: #3366CC;\">&quot;0&quot;<\/span> allowfullscreen<span style=\"color: #339933;\">&gt;&lt;\/<\/span>iframe<span style=\"color: #339933;\">&gt;<\/span><\/pre><\/td><\/tr><\/table><\/div><\/pre><!--END_DEVFMTCODE--><\/p>\n<p>Notice the width and height variables. You can change these to  re-size the YouTube video when it plays.<\/p>\n<p>Here is what this snippet looks like embedded into your webpage:<br \/>\n<iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"http:\/\/www.youtube.com\/embed\/qnRYpnh6IsY?rel=0\" frameborder=\"0\" allowfullscreen><\/iframe><br \/>\nHere is a list of YouTube embed markup variables you can add to the <strong>src=\"http:\/\/www.youtube.com\/embed\/qnRYpnh6IsY?rel=0\"<\/strong> string, within the snippet, to control features on the YouTube video player.<\/p>\n<h3>Variables to Customize YouTube Video Player<\/h3>\n<ol>\n<li>\n<h4>&amp;showinfo=0<\/h4>\n<p>Adding the 'showinfo' variable and setting it to 0 will turn off the title and ratings.<\/li>\n<li>\n<h4>&amp;showsearch=0<\/h4>\n<p>Adding 'showsearch' variable and setting it to 0 will turn off search.<\/li>\n<li>\n<h4>&amp;rel=1<\/h4>\n<p>The 'rel' variable is already part of the standard src string by default, setting it to 1 will turn on related videos.<\/li>\n<li>\n<h4>&amp;iv_load_policy=3<\/h4>\n<p>Adding the 'iv_load_policy' variable and setting it to 3 will turn off annotations.<\/li>\n<li>\n<h4>&amp;cc_load_policy=1<\/h4>\n<p>Adding the 'cc_load_policy' variable and setting it to 1 will turn off annotations.<\/li>\n<li>\n<h4>&amp;autoplay=1<\/h4>\n<p>Adding the 'autoplay' variable and adding setting it to 1 will make the video start playing automatically when someone visits the page.<\/li>\n<li>\n<h4>&amp;loop=1<\/h4>\n<p>Adding the 'loop' variable and setting it to '1' will make your video loop over and over once the play button is pressed.<\/li>\n<li>\n<h4>&amp;fs=0<\/h4>\n<p>Adding the 'fs' variable and setting it to 0 will disable the 'full screen' mode for the youtube video.<\/li>\n<li>\n<h4>&amp;hd=1<\/h4>\n<p>Adding the 'hd' variable and setting it to 1 will force the video to play in high definition 720p when it plays.<\/li>\n<li>\n<h4>&amp;ap=%2526fmt%3D18<\/h4>\n<p>Adding the 'ap' variable and setting it to '&amp;ap=%2526fmt%3D18' will force the video to play in high quality when it plays.<\/li>\n<li>\n<h4>autohide=1<\/h4>\n<p>Adding the 'autohide' variable and setting it to 1 will force the video to hide the video controls when the mouse isn't moving and hovering over the video.<\/li>\n<li>\n<h4>modestbranding=1<\/h4>\n<p>Adding the 'modestbranding' variable and setting it to 1 will hide the YoutTube logo from the video.<\/li>\n<li>\n<h4>disablekb=1<\/h4>\n<p>Adding the 'disablekb' variable and setting it to 1 will hide video controls.<\/li>\n<\/ol>\n<h3>Customize YouTube video tips<\/h3>\n<p>If your videos includes text the viewer must read, make your video player dimensions large and enable high definition.<br \/>\nIf your video is on a homepage, or you want to make it match the website theme, disable the video controls and displays. Make the video as bland and as indifferent as possible.<br \/>\nIf your YouTube video is promoting your brand or product, make sure the \u2018rel\u2019 variable is set to equal 0 so that your competitor's videos don\u2019t start playing after your video is done.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Customize YouTube video using embed markup Here is your standard iframe YouTube.com video code embed snippet: &nbsp;Javascript&nbsp;|&nbsp;&nbsp;copy&nbsp;code&nbsp;|?&nbsp;1&lt;iframe width=&quot;560&quot; height=&quot;315&quot; src=&quot;http:\/\/www.youtube.com\/embed\/qnRYpnh6IsY?rel=0&quot; frameborder=&quot;0&quot; allowfullscreen&gt;&lt;\/iframe&gt; Notice the width and height variables. You can change these to re-size the YouTube video when it plays. Here is what this snippet looks like embedded into your webpage: Here is a list [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2683,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[10,143,4],"tags":[346,99],"class_list":["post-2675","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-affordablewebsitestips","category-internet-tips","category-tutorials","tag-markup","tag-youtube"],"_links":{"self":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts\/2675","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/comments?post=2675"}],"version-history":[{"count":13,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts\/2675\/revisions"}],"predecessor-version":[{"id":2716,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/posts\/2675\/revisions\/2716"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/media\/2683"}],"wp:attachment":[{"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/media?parent=2675"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/categories?post=2675"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/2slick.com\/web\/wp-json\/wp\/v2\/tags?post=2675"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}