{"id":1989,"date":"2016-04-06T18:32:33","date_gmt":"2016-04-07T01:32:33","guid":{"rendered":"https:\/\/hellbach.us\/blog\/?p=1989"},"modified":"2016-04-06T19:20:32","modified_gmt":"2016-04-07T02:20:32","slug":"efficient-method-embedding-youtube-videos","status":"publish","type":"post","link":"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/","title":{"rendered":"A More Efficient Method for Embedding YouTube Videos"},"content":{"rendered":"<div class='__iawmlf-post-loop-links' style='display:none;' data-iawmlf-post-links='[{&quot;id&quot;:545,&quot;href&quot;:&quot;http:\\\/\\\/www.labnol.org\\\/internet\\\/embed-youtube-videos-in-html5-flash\\\/14092&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20250512141322\\\/https:\\\/\\\/www.labnol.org\\\/internet\\\/embed-youtube-videos-in-html5-flash\\\/14092&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-11-18 20:22:42&quot;,&quot;http_code&quot;:206}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2025-11-18 20:22:42&quot;,&quot;http_code&quot;:206},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:546,&quot;href&quot;:&quot;http:\\\/\\\/www.labnol.org\\\/internet\\\/test-website-performance-online\\\/17736&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20250812154200\\\/https:\\\/\\\/www.labnol.org\\\/internet\\\/test-website-performance-online\\\/17736&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-11-18 20:22:43&quot;,&quot;http_code&quot;:206}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2025-11-18 20:22:43&quot;,&quot;http_code&quot;:206},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:547,&quot;href&quot;:&quot;http:\\\/\\\/www.labnol.org\\\/internet\\\/responsive-web-design-faq\\\/21361&quot;,&quot;archived_href&quot;:&quot;&quot;,&quot;redirect_href&quot;:&quot;https:\\\/\\\/www.labnol.org\\\/internet\\\/responsive-web-design-faq\\\/21361&quot;,&quot;checks&quot;:[],&quot;broken&quot;:false,&quot;last_checked&quot;:null,&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:548,&quot;href&quot;:&quot;http:\\\/\\\/www.labnol.org\\\/internet\\\/light-youtube-embeds\\\/27941\\\/#billgates&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20250725211042\\\/https:\\\/\\\/www.labnol.org\\\/internet\\\/light-youtube-embeds\\\/27941&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-11-18 20:22:51&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2025-11-18 20:22:51&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:549,&quot;href&quot;:&quot;http:\\\/\\\/www.labnol.org\\\/internet\\\/test-mobile-friendly-website\\\/20330&quot;,&quot;archived_href&quot;:&quot;&quot;,&quot;redirect_href&quot;:&quot;https:\\\/\\\/www.labnol.org\\\/internet\\\/test-mobile-friendly-website\\\/20330&quot;,&quot;checks&quot;:[],&quot;broken&quot;:false,&quot;last_checked&quot;:null,&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:550,&quot;href&quot;:&quot;http:\\\/\\\/ctrlq.org\\\/code\\\/19452-embed-youtube-with-javascript&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20191118034513\\\/http:\\\/\\\/ctrlq.org:80\\\/code\\\/19452-embed-youtube-with-javascript&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-11-18 20:22:57&quot;,&quot;http_code&quot;:404}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2025-11-18 20:22:57&quot;,&quot;http_code&quot;:404},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:551,&quot;href&quot;:&quot;http:\\\/\\\/www.labnol.org\\\/internet\\\/embed-responsive-google-maps\\\/28333&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20250911062640\\\/https:\\\/\\\/www.labnol.org\\\/internet\\\/embed-responsive-google-maps\\\/28333&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-11-18 20:22:58&quot;,&quot;http_code&quot;:206}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2025-11-18 20:22:58&quot;,&quot;http_code&quot;:206},&quot;process&quot;:&quot;done&quot;},{&quot;id&quot;:552,&quot;href&quot;:&quot;http:\\\/\\\/www.labnol.org\\\/internet\\\/light-youtube-embeds\\\/27941&quot;,&quot;archived_href&quot;:&quot;http:\\\/\\\/web-wp.archive.org\\\/web\\\/20250725211042\\\/https:\\\/\\\/www.labnol.org\\\/internet\\\/light-youtube-embeds\\\/27941&quot;,&quot;redirect_href&quot;:&quot;&quot;,&quot;checks&quot;:[{&quot;date&quot;:&quot;2025-11-18 20:22:59&quot;,&quot;http_code&quot;:200}],&quot;broken&quot;:false,&quot;last_checked&quot;:{&quot;date&quot;:&quot;2025-11-18 20:22:59&quot;,&quot;http_code&quot;:200},&quot;process&quot;:&quot;done&quot;}]'><\/div>\n<p>When you embed any YouTube video on your website using standard\u00a0<a href=\"http:\/\/www.labnol.org\/internet\/embed-youtube-videos-in-html5-flash\/14092\/\" target=\"_blank\" rel=\"nofollow\">IFRAME tags<\/a>, you\u2019ll be surprised to know how much extra weight that YouTube video will add to your page. The web page has to download ~0.5 MB of extra resources (CSS, JavaScript and images) for rendering the YouTube video player and the files will download even if the visitor on your website has chosen not to watch the embedded YouTube video.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/img.labnol.org\/di\/youtube-page-loading.png\" alt=\"\" \/><\/p>\n<p>The embedded video is making your page heavy and the visitor\u2019s browser will also need to make multiple HTTP requests to render the video player. This increases the overall loading time of your page and thus affects the <a href=\"http:\/\/www.labnol.org\/internet\/test-website-performance-online\/17736\/\" target=\"_blank\" rel=\"nofollow\">page speed score<\/a>. The other drawback with the default YouTube embed code is that it isn\u2019t\u00a0<a href=\"http:\/\/www.labnol.org\/internet\/responsive-web-design-faq\/21361\/\" target=\"_blank\" rel=\"nofollow\">responsive<\/a>. If people view your website on a mobile phone, the video player would not resize itself accordingly.<\/p>\n<h2>Load YouTube Video Player On-Demand<\/h2>\n<p>Google Plus uses a clever workaround to reduce the time it takes to initially load the YouTube video player and we can incorporate a similar approach approach for our websites as well.<\/p>\n<p>Instead of embedding the full Youtube video player, Google+ displays just the thumbnail images of a YouTube video and a \u201cplay\u201d icon is placed over the video so that it looks like a video player. The <a href=\"http:\/\/www.labnol.org\/internet\/light-youtube-embeds\/27941\/#billgates\" target=\"_blank\" rel=\"nofollow\">following video<\/a> is embedded using the same technique:<\/p>\n<div id=\"billgates\" class=\"youtube-player\" data-id=\"aSL-iIskEFU\">\n<div>\n<p><img decoding=\"async\" class=\"youtube-thumb\" src=\"\/\/i.ytimg.com\/vi\/aSL-iIskEFU\/hqdefault.jpg\" alt=\"\" \/><noscript><img decoding=\"async\" class=\"youtube-thumb\" src=\"\/\/i.ytimg.com\/vi\/aSL-iIskEFU\/hqdefault.jpg\"\/><\/noscript><\/p>\n<div class=\"play-button\"><\/div>\n<\/div>\n<\/div>\n<p><script>\/\/ < ![CDATA[\n(function() {\n        var v = document.getElementsByClassName(\"youtube-player\");\n        for (var n=0; n<v.length; n++) {\n          var p = document.createElement(\"div\");\n          p.innerHTML = labnolThumb(v[n].dataset.id);\n          p.onclick = labnolIframe;\n          v[n].appendChild(p);\n        } \n      })();\n\n      function labnolThumb(id) {\n        return '<img class=\"youtube-thumb\" src labnol=\"\/\/i.ytimg.com\/vi\/' + id + '\/hqdefault.jpg\"><noscript><img decoding=\"async\" class=\"youtube-thumb\" src=\"\/\/i.ytimg.com\/vi\/' + id + '\/hqdefault.jpg\"\/><\/noscript><\/p>\n<div class=\"play-button\"><\/div>\n<p>';\n      }<\/p>\n<p>      function labnolIframe() {\n        var iframe = document.createElement(\"iframe\");\n        iframe.setAttribute(\"src\", \"\/\/www.youtube.com\/embed\/\" + this.parentNode.dataset.id + \"?autoplay=1&autohide=2&border=0&wmode=opaque&enablejsapi=1&controls=0&showinfo=0\");\n        iframe.setAttribute(\"frameborder\", \"0\");\n        iframe.setAttribute(\"id\", \"youtube-iframe\");\n        this.parentNode.replaceChild(iframe, this);\n      }\n\/\/ ]]><\/script><\/p>\n<p>When the user hits the play button, the video thumbnail is replaced with the standard YouTube video player with autoplay set to 1 so it plays the video instantly. The extra player-specific resources are thus loaded only when the user has decided to play the embedded video and not otherwise.<\/p>\n<p>The regular embed code for YouTube looks something like this. You specify the height of the player (in pixels), the width and the unique ID of the YouTube video.<br \/>\n<code><\/code><\/p>\n<pre>&lt;iframe width=\"320\" height=\"180\" \r\n     src=\"http:\/\/www.youtube.com\/embed\/LcIytqkbdlo\"&gt;\r\n&lt;\/iframe&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h3>Embed YouTube Videos Responsively without Increasing Load Time<\/h3>\n<p>The on-demand embed code for YouTube is slightly different since we are now embedding the video responsively and also because the IFRAME embed code is added only then user clicks the play button.<\/p>\n<p>Copy-paste the following snippet anywhere in your web page where you would like the video to appear. Remember to replace VIDEOID with the actual ID of the YouTube video. The CSS and JavaScript codes are added to the template separately. Also, there\u2019s no need to add the height and width parameter since the video will automatically occupy the width of the parent while the height is auto-calculated.<br \/>\n<code><\/code><\/p>\n<pre>&lt;div class=\"youtube-container\"&gt;\r\n   &lt;div class=\"youtube-player\" data-id=\"VIDEOID\"&gt;&lt;\/div&gt;\r\n&lt;\/div&gt;\r\n<\/pre>\n<p>You can copy-paste multiple blocks on the same page incase you need to embed multiple videos on the same page. The code will stay the same except that you need to change the VIDEOID for each of the blocks.<\/p>\n<h4>The JavaScript<\/h4>\n<p>The JavaScript function will scan your pages for embedded YouTube videos. If found, it will add the corresponding thumbnail image and also add the onclick event listener that will do the actual magic \u2013 replace the image with the actual YouTube video in autoplay mode.<br \/>\n<code><\/code><\/p>\n<pre>&lt;script&gt;\r\n(function() {\r\n    var v = document.getElementsByClassName(\"youtube-player\");\r\n    for (var n = 0; n &lt; v.length; n++) {\r\n        var p = document.createElement(\"div\"); \r\n        p.innerHTML = labnolThumb(v[n].dataset.id); \r\n        p.onclick = labnolIframe; v[n].appendChild(p); \r\n    } \r\n})(); \r\n\r\nfunction labnolThumb(id) { \r\n    return '&lt;img class=\"youtube-thumb\" src=\"\/\/i.ytimg.com\/vi\/' \r\n+ id + '\/hqdefault.jpg\"&gt;&lt;div class=\"play-button\"&gt;&lt;\/div&gt;';\r\n}\r\n \r\nfunction labnolIframe() {\r\n    var iframe = document.createElement(\"iframe\");\r\n    iframe.setAttribute(\"src\", \"\/\/www.youtube.com\/embed\/\" \r\n+ this.parentNode.dataset.id + \"?\r\nautoplay=1&amp;autohide=2&amp;border=0&amp;wmode=opaque&amp;enablejsapi=1&amp;controls=0\r\n&amp;showinfo=0\");\r\n    iframe.setAttribute(\"frameborder\", \"0\");\r\n    iframe.setAttribute(\"id\", \"youtube-iframe\");\r\n    this.parentNode.replaceChild(iframe, this);\r\n}\r\n&lt;\/script&gt;\r\n<\/pre>\n<p>&nbsp;<\/p>\n<h4>The CSS<\/h4>\n<p>Open the CSS file of your website and paste the following snippet. If you don\u2019t have a separate CSS file, you can also place it before the closing head tag of your web template.<\/p>\n<div class=\"garectangle\"><\/div>\n<p>&nbsp;<\/p>\n<pre>&lt;style&gt;\r\n.youtube-container { display: block; margin: 20px auto; width: 100%; max-width: 600px; }\r\n.youtube-player { display: block; width: 100%; \/* assuming that the video has a 16:9 ratio *\/ padding-bottom: 56.25%; overflow: hidden; position: relative; width: 100%; height: 100%; cursor: hand; cursor: pointer; display: block; }\r\nimg.youtube-thumb { bottom: 0; display: block; left: 0; margin: auto; max-width: 100%; width: 100%; position: absolute; right: 0; top: 0; height: auto }\r\ndiv.play-button { height: 72px; width: 72px; left: 50%; top: 50%; margin-left: -36px; margin-top: -36px; position: absolute; background: url(\"http:\/\/i.imgur.com\/TxzC70f.png\") no-repeat; }\r\n#youtube-iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; }\r\n&lt;\/style&gt;\r\n<\/pre>\n<p>This method will reduce the size of your webpages by 300-400 KB while making your <a href=\"http:\/\/www.labnol.org\/internet\/test-mobile-friendly-website\/20330\/\" target=\"_blank\" rel=\"nofollow\">site mobile friendly<\/a>. You may refer to the <a href=\"http:\/\/ctrlq.org\/code\/19452-embed-youtube-with-javascript\" target=\"_blank\" rel=\"nofollow\">annotated code<\/a> to understanding how on-demand embedding works.<\/p>\n<p>Also see: <a href=\"http:\/\/www.labnol.org\/internet\/embed-responsive-google-maps\/28333\/\" target=\"_blank\" rel=\"nofollow\">Embed Google Maps Responsively<\/a><\/p>\n<p><em>source: <a href=\"http:\/\/www.labnol.org\/internet\/light-youtube-embeds\/27941\/\" target=\"_blank\" rel=\"nofollow\">labNol<\/a><\/em><\/p>\n","protected":false},"excerpt":{"rendered":"<p>When you embed any YouTube video on your website using standard\u00a0IFRAME tags, you\u2019ll be surprised to know how much extra weight that YouTube video will add to your page. The web page has to download ~0.5 MB of extra resources &hellip; <a href=\"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[29],"tags":[],"class_list":["post-1989","post","type-post","status-publish","format-standard","hentry","category-dev"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.9 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>A More Efficient Method for Embedding YouTube Videos - Hellbach blog<\/title>\n<meta name=\"description\" content=\"how to embed YouTube videos in your web page responsively and without increasing the page load time. The embed is light and mobile friendly.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"A More Efficient Method for Embedding YouTube Videos\" \/>\n<meta property=\"og:description\" content=\"Learn how to embed YouTube videos in your web page responsively and without increasing the page load time. The embed is light and mobile friendly.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/\" \/>\n<meta property=\"og:site_name\" content=\"Hellbach blog\" \/>\n<meta property=\"article:published_time\" content=\"2016-04-07T01:32:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-04-07T02:20:32+00:00\" \/>\n<meta name=\"author\" content=\"alex\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:title\" content=\"A More Efficient Method for Embedding YouTube Videos\" \/>\n<meta name=\"twitter:description\" content=\"Learn how to embed YouTube videos in your web page responsively and without increasing the page load time. The embed is light and mobile friendly.\" \/>\n<meta name=\"twitter:image\" content=\"http:\/\/img.labnol.org\/di\/youtube-page-loading.png\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"alex\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/\"},\"author\":{\"name\":\"alex\",\"@id\":\"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507\"},\"headline\":\"A More Efficient Method for Embedding YouTube Videos\",\"datePublished\":\"2016-04-07T01:32:33+00:00\",\"dateModified\":\"2016-04-07T02:20:32+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/\"},\"wordCount\":586,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507\"},\"image\":{\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/img.labnol.org\/di\/youtube-page-loading.png\",\"articleSection\":[\"Dev\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/\",\"url\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/\",\"name\":\"A More Efficient Method for Embedding YouTube Videos - Hellbach blog\",\"isPartOf\":{\"@id\":\"https:\/\/hellbach.us\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/#primaryimage\"},\"thumbnailUrl\":\"http:\/\/img.labnol.org\/di\/youtube-page-loading.png\",\"datePublished\":\"2016-04-07T01:32:33+00:00\",\"dateModified\":\"2016-04-07T02:20:32+00:00\",\"description\":\"how to embed YouTube videos in your web page responsively and without increasing the page load time. The embed is light and mobile friendly.\",\"breadcrumb\":{\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/#primaryimage\",\"url\":\"http:\/\/img.labnol.org\/di\/youtube-page-loading.png\",\"contentUrl\":\"http:\/\/img.labnol.org\/di\/youtube-page-loading.png\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/hellbach.us\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"A More Efficient Method for Embedding YouTube Videos\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/hellbach.us\/blog\/#website\",\"url\":\"https:\/\/hellbach.us\/blog\/\",\"name\":\"Hellbach blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/hellbach.us\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507\",\"name\":\"alex\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/hellbach.us\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/9868a7f8fd709cd74cf51d978359a3ce66a47a17cd57185a9e1a4774d288e228?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/9868a7f8fd709cd74cf51d978359a3ce66a47a17cd57185a9e1a4774d288e228?s=96&d=mm&r=g\",\"caption\":\"alex\"},\"logo\":{\"@id\":\"https:\/\/hellbach.us\/blog\/#\/schema\/person\/image\/\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"A More Efficient Method for Embedding YouTube Videos - Hellbach blog","description":"how to embed YouTube videos in your web page responsively and without increasing the page load time. The embed is light and mobile friendly.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/","og_locale":"en_US","og_type":"article","og_title":"A More Efficient Method for Embedding YouTube Videos","og_description":"Learn how to embed YouTube videos in your web page responsively and without increasing the page load time. The embed is light and mobile friendly.","og_url":"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/","og_site_name":"Hellbach blog","article_published_time":"2016-04-07T01:32:33+00:00","article_modified_time":"2016-04-07T02:20:32+00:00","author":"alex","twitter_card":"summary_large_image","twitter_title":"A More Efficient Method for Embedding YouTube Videos","twitter_description":"Learn how to embed YouTube videos in your web page responsively and without increasing the page load time. The embed is light and mobile friendly.","twitter_image":"http:\/\/img.labnol.org\/di\/youtube-page-loading.png","twitter_misc":{"Written by":"alex","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/#article","isPartOf":{"@id":"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/"},"author":{"name":"alex","@id":"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507"},"headline":"A More Efficient Method for Embedding YouTube Videos","datePublished":"2016-04-07T01:32:33+00:00","dateModified":"2016-04-07T02:20:32+00:00","mainEntityOfPage":{"@id":"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/"},"wordCount":586,"commentCount":0,"publisher":{"@id":"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507"},"image":{"@id":"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/#primaryimage"},"thumbnailUrl":"http:\/\/img.labnol.org\/di\/youtube-page-loading.png","articleSection":["Dev"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/","url":"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/","name":"A More Efficient Method for Embedding YouTube Videos - Hellbach blog","isPartOf":{"@id":"https:\/\/hellbach.us\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/#primaryimage"},"image":{"@id":"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/#primaryimage"},"thumbnailUrl":"http:\/\/img.labnol.org\/di\/youtube-page-loading.png","datePublished":"2016-04-07T01:32:33+00:00","dateModified":"2016-04-07T02:20:32+00:00","description":"how to embed YouTube videos in your web page responsively and without increasing the page load time. The embed is light and mobile friendly.","breadcrumb":{"@id":"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/#primaryimage","url":"http:\/\/img.labnol.org\/di\/youtube-page-loading.png","contentUrl":"http:\/\/img.labnol.org\/di\/youtube-page-loading.png"},{"@type":"BreadcrumbList","@id":"https:\/\/hellbach.us\/blog\/tech\/dev\/efficient-method-embedding-youtube-videos\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/hellbach.us\/blog\/"},{"@type":"ListItem","position":2,"name":"A More Efficient Method for Embedding YouTube Videos"}]},{"@type":"WebSite","@id":"https:\/\/hellbach.us\/blog\/#website","url":"https:\/\/hellbach.us\/blog\/","name":"Hellbach blog","description":"","publisher":{"@id":"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/hellbach.us\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/hellbach.us\/blog\/#\/schema\/person\/9bf1a63e253268c42a6e9db64611c507","name":"alex","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/hellbach.us\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/9868a7f8fd709cd74cf51d978359a3ce66a47a17cd57185a9e1a4774d288e228?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/9868a7f8fd709cd74cf51d978359a3ce66a47a17cd57185a9e1a4774d288e228?s=96&d=mm&r=g","caption":"alex"},"logo":{"@id":"https:\/\/hellbach.us\/blog\/#\/schema\/person\/image\/"}}]}},"_links":{"self":[{"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/posts\/1989","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/comments?post=1989"}],"version-history":[{"count":0,"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/posts\/1989\/revisions"}],"wp:attachment":[{"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/media?parent=1989"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/categories?post=1989"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/hellbach.us\/blog\/wp-json\/wp\/v2\/tags?post=1989"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}