Prevent huge amount of xhr/ajax calls on Facebook embed iframe

Question

I have a Bootstrap Carousel with a lot of social embeds from Facebook all containing videos. I won't go into specifics of the Bootstrap Carousel as the problem is already visible on this simple jsfiddle and is due to Facebook embed.

If you load this page: https://jsfiddle.net/1L95vqn4/, and look on Chrome Dev tools on the 'Network Tab' and filter on 'XHR' (with Cache disabled), you'll see 34 requests and it loads 5.8Mb before you even 'play' the video all loaded via ajax by the Facebook iframe.

I would like to lazy load the weight of those fb ajax request, that is to say, to only load those calls when either the user press "play video".

I am very surprised I could not find anything about this on the web. Other social networks such as twitter embed do not load the video until the user press play. Huge amount of data in Facebook embed case is loaded (5Mb, 15mb, 30mb...) even before playing the video.

Note just for the sake of information about my actual more complex issue: on my website, I am actually not using this iframe but embed style (but impossible to put ajax requests on jsfiddle or too complex for me). And my actual issue is that when you load a carousel where on each slide you have 20 facebook embed videos, then it adds up to a huge performance hit when you open the carousel.

$.ajax({
  url: 'https://www.facebook.com/plugins/post/oembed.json/?url=https://www.facebook.com/cocacola/posts/1526674334016658',
  dataType: 'jsonp',
  cache: false,
  success: function (data) { 
    try {         
      var embed_html = (data.html);
      $('div#item1').html(embed_html);
    } catch (err) {
      console.log(err);
    }
  }
});

Is there any way to prevent FB to load all this ajax xhr and mp4 affecting performance by lazy loading, or with any other way ?

Answer 1

One workaround I'm thinking about, since it doesn't look like there is a way to prevent the data from being loaded directly, would be to display a placeholder of your video with a play icon, and only once the user click on it trigger the xhr call that will replace the element. You can then autoplay the video if it's not the case by default, given the user already requested to play it.

Something like that (as you said can't really work in jsfiddle, but you get the idea):

$('#item1').on('click', () => {

  $.ajax({
    url: 'https://www.facebook.com/plugins/post/oembed.json/?url=https://www.facebook.com/cocacola/posts/1526674334016658',
    dataType: 'jsonp',
    cache: false,
    success: data => $('div#item1').html(data.html),
  });

})

.facebook-play {
  background-image: url(https://www.facebook.com/rsrc.php/v3/yE/r/UxpyARHiHA2.png);
  background-repeat: no-repeat;
  background-size: 81px 224px;
  background-position: 0 0;
  height: 80px;
  margin: -40px 0 0 -40px;
  width: 80px;
  
  position: absolute;
  top: 50%;
  left: 45%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="item1">
  <img src="https://cdn.pixabay.com/photo/2016/05/18/20/57/cat-1401557_1280.jpg" width=550 height=360 />
  <i class="facebook-play" />
</div>