title: Can't Defer Youtube CSS with JavaScript
body: <p>I'm trying to defer the loading of YouTube CSS and JavaScript on my site for performance purposes. However, running a scan of my page with Google's Page Speed Insights indicates that the YouTube CSS file <code>https://www.youtube.com/yts/cssbin/www-player-sprite-mode-vflixBY8E.css</code> is not being deferred. I also tested removing the JavaScript to make sure the CSS file was not being requested by some other resource but that was not the case. </p>
  
  <p>Here is the code I am using:</p>
  
  <p>In my main.js file (which is deferred)</p>
  
  <pre><code>function init() {
      var vidDefer = document.getElementsByClassName('youtube');
      for (var i=0; i&lt;vidDefer.length; i++) {
          if(vidDefer[i].getAttribute('data-src')) {
              vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
          } 
      } 
  }
  window.onload = init;
  </code></pre>
  
  <p>Then, the iframe looks like this:</p>
  
  <pre><code>&lt;iframe class="youtube" id="home-youtube" src="" data-src="https://www.youtube.com/embed/QHfgMrpMOm4" frameborder="0" allowfullscreen&gt;&lt;/iframe&gt;
  </code></pre>
  
  <p>Thanks in advance</p>