{"id":362,"date":"2016-10-28T11:49:47","date_gmt":"2016-10-28T11:49:47","guid":{"rendered":"http:\/\/angelwings.net\/blog\/?p=362"},"modified":"2016-10-28T11:49:47","modified_gmt":"2016-10-28T11:49:47","slug":"embed-a-video-with-both-autoplay-mute-and-other-variables","status":"publish","type":"post","link":"https:\/\/angelwings.net\/blog\/embed-a-video-with-both-autoplay-mute-and-other-variables\/","title":{"rendered":"Embed a video with both autoplay, mute and other variables"},"content":{"rendered":"<p>Source: http:\/\/stackoverflow.com\/questions\/19241151\/adding-additional-parameters-to-the-yt-player-object-from-youtube<\/p>\n<p>https:\/\/developers.google.com\/youtube\/player_parameters?playerVersion=HTML5<\/p>\n<p>https:\/\/productforums.google.com\/forum\/#!msg\/youtube\/XS5_P_9OXCo\/-oNOf3d8x4sJ<\/p>\n<p>http:\/\/jsfiddle.net\/oLtcsh49\/2\/<\/p>\n<p>&lt;!&#8211; 1. The &lt;iframe&gt; (and video player) will replace this &lt;div&gt; tag. &#8211;&gt;<br \/>\n&lt;div id=&#8221;player&#8221;&gt;&lt;\/div&gt;<\/p>\n<p>&lt;script&gt;<br \/>\n\/\/ 2. This code loads the IFrame Player API code asynchronously.<br \/>\nvar tag = document.createElement(&#8216;<wbr \/>script&#8217;);<\/p>\n<p>tag.src = &#8220;<a href=\"https:\/\/www.youtube.com\/iframe_api\" target=\"_blank\" rel=\"nofollow noopener\">https:\/\/www.youtube.com\/<wbr \/>iframe_api<\/a>&#8220;;<br \/>\nvar firstScriptTag = document.getElementsByTagName(<wbr \/>&#8216;script&#8217;)[0];<br \/>\nfirstScriptTag.parentNode.<wbr \/>insertBefore(tag, firstScriptTag);<\/p>\n<p>\/\/ 3. This function creates an &lt;iframe&gt; (and YouTube player)<br \/>\n\/\/ \u00a0 \u00a0after the API code downloads.<br \/>\nvar player;<br \/>\nfunction onYouTubeIframeAPIReady() {<br \/>\nplayer = new YT.Player(&#8216;player&#8217;, {<br \/>\nheight: &#8216;195&#8217;,<br \/>\nwidth: &#8216;260&#8217;,<br \/>\nvideoId: &#8216;h3P1OR9gg2Y&#8217;,<br \/>\nplayerVars: { &#8216;autoplay&#8217;: 1, &#8216;controls&#8217;: 1,&#8217;showinfo&#8217;:0, rel:0},<br \/>\nevents: {<br \/>\n&#8216;onReady&#8217;: onPlayerReady,<br \/>\n&#8216;onStateChange&#8217;: onPlayerStateChange<br \/>\n}<br \/>\n});<br \/>\n}<\/p>\n<p>\/\/ 4. The API will call this function when the video player is ready.<br \/>\nfunction onPlayerReady(event) {<br \/>\nevent.target.setVolume(0);<br \/>\nevent.target.playVideo();<br \/>\n}<\/p>\n<p>\/\/ 5. The API calls this function when the player&#8217;s state changes.<br \/>\n\/\/ \u00a0 \u00a0The function indicates that when playing a video (state=1),<br \/>\n\/\/ \u00a0 \u00a0the player should play for six seconds and then stop.<br \/>\nvar done = false;<br \/>\nfunction onPlayerStateChange(event) {<br \/>\nif (event.data == YT.PlayerState.PLAYING &amp;&amp; !done) {<br \/>\n\/\/ \u00a0 \u00a0 \u00a0setTimeout(stopVideo, 6000);<br \/>\ndone = true;<br \/>\n}<br \/>\nevent.target.setVolume(0);<br \/>\n}<br \/>\n&lt;\/script&gt;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Source: http:\/\/stackoverflow.com\/questions\/19241151\/adding-additional-parameters-to-the-yt-player-object-from-youtube https:\/\/developers.google.com\/youtube\/player_parameters?playerVersion=HTML5 https:\/\/productforums.google.com\/forum\/#!msg\/youtube\/XS5_P_9OXCo\/-oNOf3d8x4sJ http:\/\/jsfiddle.net\/oLtcsh49\/2\/ &lt;!&#8211; 1. The &lt;iframe&gt; (and video player) will replace this &lt;div&gt; tag. &#8211;&gt; &lt;div id=&#8221;player&#8221;&gt;&lt;\/div&gt; &lt;script&gt; \/\/ 2. This code loads the IFrame Player API code asynchronously. var tag = document.createElement(&#8216;script&#8217;); tag.src = &#8220;https:\/\/www.youtube.com\/iframe_api&#8220;; var firstScriptTag = document.getElementsByTagName(&#8216;script&#8217;)[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); \/\/ 3. This function creates an &lt;iframe&gt; (and YouTube player) [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[34],"tags":[60,122,134],"class_list":["post-362","post","type-post","status-publish","format-standard","hentry","category-youtube","tag-embed","tag-video","tag-youtube"],"_links":{"self":[{"href":"https:\/\/angelwings.net\/blog\/wp-json\/wp\/v2\/posts\/362","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/angelwings.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/angelwings.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/angelwings.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/angelwings.net\/blog\/wp-json\/wp\/v2\/comments?post=362"}],"version-history":[{"count":0,"href":"https:\/\/angelwings.net\/blog\/wp-json\/wp\/v2\/posts\/362\/revisions"}],"wp:attachment":[{"href":"https:\/\/angelwings.net\/blog\/wp-json\/wp\/v2\/media?parent=362"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/angelwings.net\/blog\/wp-json\/wp\/v2\/categories?post=362"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/angelwings.net\/blog\/wp-json\/wp\/v2\/tags?post=362"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}