Preventing huge number of xhr / ajax calls on Facebook embed iframe

Question

I have a Bootstrap carousel with a lot of social attachments from Facebook containing all the videos. I will not go into the details of the Bootstrap carousel, as the problem is already visible on this simple jsfiddle and should be embedded in Facebook.

If you download this page: https://jsfiddle.net/1L95vqn4/ and look at the Chrome Dev tools on the "Network" tab and filter out "XHR '(with cache disabled) you will see 34 requests and download 5.8Mb before you even “play” video uploaded via ajax using iframe Facebook.

I would like to be lazy to load the weight of these fb ajax requests, that is, to load only these calls when the user clicks “play video”.

I am very surprised that I can not find anything on the Internet. Other social networks, such as twitter embed, do not upload the video until the user starts playback. A huge amount of data in the application for embedding Facebook is downloaded (5Mb, 15mb, 30mb ...) even before playing the video.

Pay attention only to the information about my real more complex problem: on my website I do not actually use this iframe, but the embedding style (but it is impossible to put ajax requests on jsfiddle or too complicated for me). And my real problem is that when you download the carousel, where there are 20 facebook videos on each slide, then this adds tremendous performance 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 a way to prevent FB from loading all of these ajax xhr and mp4, affecting performance on lazy loading or any other way?

Answer 1

You can use AjaxSetup as described below (but this is just a general example):

 var i = 0; function ajaxTest() { // these HTTP methods do not require CSRF protection $.get('http://my.site.com/somepage.html'); } jQuery.ajaxSetup({ beforeSend: function (xhr, settings) { i++; if (i > 50) { $('#res').html('Not allowed!</br>'); return false; } else { $('#res').html('Allowed![' + i + ']</br>'); return true; } } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button onclick="ajaxTest()">Test</button> <div id="res"></div> 

Hope this helps you :)

Answer 2

A workaround that I'm thinking of, since it doesn't seem like there is a way to prevent the data from loading directly, would be to display a placeholder for your video with a playback image and only once would the user click on it to call xhr, which will replace the item. Then you can autoplay the video if it is not, by default, if the user has already asked to play it.

Something like this (as you said, may not 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>