{"id":4772,"date":"2015-05-19T14:01:36","date_gmt":"2015-05-19T21:01:36","guid":{"rendered":"http:\/\/www.dognmonkey.com\/techs\/?p=4772"},"modified":"2017-11-14T10:41:05","modified_gmt":"2017-11-14T18:41:05","slug":"embed-youtube-video-iframe-vs-html5","status":"publish","type":"post","link":"https:\/\/www.dognmonkey.com\/techs\/embed-youtube-video-iframe-vs-html5.html","title":{"rendered":"Embed Youtube Video Iframe VS HTML5"},"content":{"rendered":"<p><link href=\"\/idogjs\/icss\/font-awesome\/css\/ifotorama.css\" rel=\"stylesheet\"><script src=\"https:\/\/ajax.googleapis.com\/ajax\/libs\/jquery\/1.11.3\/jquery.min.js\"><\/script><script src=\"\/idogjs\/ijs\/ifotorama.js\"><\/script><br \/>\nThe website loading is critical for users to access with mobile devices, my websites do have many youtube videos embedded. The new way is iframe embed and the expert do recommend NOT to use. I found another way to embed youtube videos without using the iframe and it&#8217;s supposed to load faster. The <a href=\"\/\/www.labnol.org\/internet\/light-youtube-embeds\/27941\/\" target=\"_blank\" rel=\"noopener\">labnol.org shows how to do it<\/a>.<\/p>\n<p>I modify the original script to add full screen option. I&#8217;m loading these 3 youtube videos to compare the loading time with the <a href=\"\/\/www.dognmonkey.com\/techs\/embed-youtube-iframe-vs-html5-test.html\" target=\"_blank\" rel=\"noopener\">same iframe ones.<\/a><\/p>\n<blockquote><p>function labnolIframe() {<br \/>\nvar iframe = document.createElement(&#8220;iframe&#8221;);<br \/>\niframe.setAttribute(&#8220;src&#8221;, &#8220;\/\/www.youtube.com\/embed\/&#8221; + this.parentNode.dataset.id + &#8220;?autoplay=1&amp;autohide=2&amp;border=0&amp;wmode=opaque&amp;enablejsapi=1&amp;controls=1&amp;showinfo=1&#8221;);<br \/>\niframe.setAttribute(&#8220;allowfullscreen&#8221;, &#8220;1&#8221;);<br \/>\niframe.setAttribute(&#8220;id&#8221;, &#8220;youtube-iframe&#8221;);<br \/>\nthis.parentNode.replaceChild(iframe, this);<br \/>\n}<\/p><\/blockquote>\n<p><em>I created a shortcodes.php to embed the youtube id easily.<\/em><br \/>\n&#8220;myutube id=&#8221;youtube_id&#8221;<\/p>\n<div class='fotorama--wp' data-ids='4802,4803,4804,4798,4797,4800,4801,4799'data-allowfullscreen='yes'data-link='file'data-itemtag='dl'data-icontag='dt'data-captiontag='dd'data-columns='0'data-size='large'data-width='800'data-auto='false'data-max-width='100%'data-ratio='2.9304029304029'><div id='gallery-1' class='gallery galleryid-4772 gallery-columns-0 gallery-size-thumbnail'><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/05\/z_html5_new1.jpg' data-full='https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/05\/z_html5_new1.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"112\" height=\"112\" src=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/05\/z_html5_new1-150x150.jpg\" class=\"w3-image attachment-thumbnail size-thumbnail\" alt=\"\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/05\/z_html5_new2.jpg' data-full='https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/05\/z_html5_new2.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"112\" height=\"112\" src=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/05\/z_html5_new2-150x150.jpg\" class=\"w3-image attachment-thumbnail size-thumbnail\" alt=\"\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/05\/z_html5_new3.jpg' data-full='https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/05\/z_html5_new3.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"112\" height=\"112\" src=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/05\/z_html5_new3-150x150.jpg\" class=\"w3-image attachment-thumbnail size-thumbnail\" alt=\"\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/05\/z_html5_2.jpg' data-full='https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/05\/z_html5_2.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"112\" height=\"112\" src=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/05\/z_html5_2-150x150.jpg\" class=\"w3-image attachment-thumbnail size-thumbnail\" alt=\"\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/05\/z_html5_1.jpg' data-full='https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/05\/z_html5_1.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"112\" height=\"112\" src=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/05\/z_html5_1-150x150.jpg\" class=\"w3-image attachment-thumbnail size-thumbnail\" alt=\"\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/05\/z_html5_4.jpg' data-full='https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/05\/z_html5_4.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"112\" height=\"112\" src=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/05\/z_html5_4-150x150.jpg\" class=\"w3-image attachment-thumbnail size-thumbnail\" alt=\"\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/05\/z_html5_5.jpg' data-full='https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/05\/z_html5_5.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"112\" height=\"112\" src=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/05\/z_html5_5-150x150.jpg\" class=\"w3-image attachment-thumbnail size-thumbnail\" alt=\"\" \/><\/a>\n\t\t\t<\/dt><\/dl><dl class='gallery-item'>\n\t\t\t<dt class='gallery-icon landscape'>\n\t\t\t\t<a href='https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/05\/z_html5_3.jpg' data-full='https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/05\/z_html5_3.jpg'><img loading=\"lazy\" decoding=\"async\" width=\"112\" height=\"112\" src=\"https:\/\/www.dognmonkey.com\/techs\/wp-content\/uploads\/2015\/05\/z_html5_3-150x150.jpg\" class=\"w3-image attachment-thumbnail size-thumbnail\" alt=\"\" \/><\/a>\n\t\t\t<\/dt><\/dl>\n\t\t<\/div>\n<\/div>\n<p>[myutube id=&#8221;msFmkKXmlmM&#8221;]<\/p>\n<p>[myutube id=&#8221;msFmkKXmlmM&#8221;]<\/p>\n<p>[myutube id=&#8221;msFmkKXmlmM&#8221;]<\/p>\n<p style=\"text-align: center;\"><ul class=\"lcp_catlist\" id=\"lcp_instance_0\"><\/ul><\/p>\n","protected":false},"excerpt":{"rendered":"<p>The website loading is critical for users to access with mobile devices, my websites do have many youtube videos embedded. The new way is iframe embed and the expert do recommend NOT to use. I found another way to embed youtube videos without using the iframe and it&#8217;s supposed to load faster. The labnol.org shows <a href=\"https:\/\/www.dognmonkey.com\/techs\/embed-youtube-video-iframe-vs-html5.html\" class=\"more-link\">&#8230;<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"gallery","meta":{"footnotes":""},"categories":[20],"tags":[275,654,653],"class_list":["post-4772","post","type-post","status-publish","format-gallery","hentry","category-wordpress","tag-youtube-embed","tag-youtube-html5","tag-youtube-iframe","post_format-post-format-gallery"],"views":210,"_links":{"self":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/4772","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/comments?post=4772"}],"version-history":[{"count":3,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/4772\/revisions"}],"predecessor-version":[{"id":6593,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/posts\/4772\/revisions\/6593"}],"wp:attachment":[{"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/media?parent=4772"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/categories?post=4772"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.dognmonkey.com\/techs\/wp-json\/wp\/v2\/tags?post=4772"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}