title: Display Facebook video that only loads when user clicks thumbnail
body: <p>I need to embed a Facebook video on a website, and my aim is to load a thumbnail and to only load the embed when the visitor clicks the thumbnail. This reduces up-front load time which is better for overall site performance.</p>
  
  <p>I tried using a script that detects when parent element (“.bbfb-video”) is clicked and inserts the embedded video. </p>
  
  <p>Note: jQuery is in use.</p>
  
  <pre><code>&lt;div class="video bbfb-video" id="10154009776186729" data-link="https://www.facebook.com/facebook/videos/10154009776186729/"&gt;
      &lt;img class="bbfb-thumb" src="https://via.placeholder.com/640x360?text=video" alt="thumbnail"/&gt;
  &lt;/div&gt;
  &lt;script&gt;
  (function() {
      if ($('.bbfb-video').length === 0) return;
      $('.bbfb-video').each(function() {
           var fb = this,
           id = this.id;
          $(fb).click( function() {
              var href = $(this).attr('data-link');
              $(this).empty();
              $(this).append('&lt;div class="fb-video" data-allowfullscreen="true" data-href="'+href+'" data-width="500" data-show-text="false"&gt;&lt;/div&gt;');
              //Re-parse the parent
              FB.XFBML.parse(document.getElementById(id));
              //Autoplay
              FB.Event.subscribe('xfbml.ready', function(msg) {
                  if (msg.type === 'video') {
                      msg.instance.play();
                  }
              });
          });
      });
  })();
  &lt;/script&gt;
  </code></pre>
  
  <p>This creates new div <code>&lt;div class="fb-video" data-allowfullscreen="true" data-href="https://www.facebook.com/facebook/videos/10154009776186729/" data-width="500" data-show-text="false"&gt;&lt;/div&gt;</code> , no video is shown.</p>
  
  <p>Error is <code>Uncaught ReferenceError: FB is not defined</code></p>