Integrating Facebook Videos

My website has a collection of video links that open in a fancybox when clicked using jQuery. However, there is an issue where the videos used to play with sound automatically, but now they require manual unmuting. I am unsure of why this behavior changed.

After researching and following documentation, I generated an app ID and integrated the code snippet below into the onclick jQuery function:

window.fbAsyncInit = function() {
      FB.init({
        appId      : '111111111111',
        xfbml      : true,
        version    : 'v2.5'
      });

      var my_video_player;
      FB.Event.subscribe('xfbml.ready', function(msg) {
        if (msg.type === 'video') {
          my_video_player = msg.instance;
          my_video_player.play();
          my_video_player.unmute();
        }
      });
    };

The above code successfully works on the first click, but subsequent clicks on other video links do not load the videos. Only the first video loads each time.

I am seeking guidance on how to ensure the above code functions multiple times within an onclick function without the need for page reloads.

Answer №1

One issue to note is the unreliability of window.fbAsyncInit in Safari 11. It seems that most of the time it fails to load properly. While testing on a Mac with Safari, I initially suspected a problem with the javascript code.

Interestingly, the functionality works fine in other desktop browsers. However, when tested on Android using the Brave browser, the FB video failed to load.

Considering these challenges, it might be best to avoid using FB videos for production sites and instead opt for hosting them on YouTube!

window.fbAsyncInit = function() {
  FB.init({
    appId      : '111111111111',
    xfbml      : true,
    version    : 'v2.5'
  });

  var my_video_player;
  FB.Event.subscribe('xfbml.ready', function(msg) {
    if (msg.type === 'video') {
      my_video_player = msg.instance;
      my_video_player.play();
      my_video_player.unmute();
    }
  });
};

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for adding an array to an array of objects with AngularJs

I'm facing an issue with the array structure in my code. Here's what I currently have: $scope.arrayList=[{FirstName:"",LastName:""}]; $scope.Address=[{address:"",PhoneNumber:""}]; What I want to achieve is to push the $scope.Address array into ...

Executing a JavaScript utility before running a collection in Postman: Step-by-step guide

Regarding my needs Before executing the Postman Collection, I need to complete a few preliminary steps: I need to use a JavaScript utility to generate JSON file containing input BODY data The generated JSON file will then be used by another utility to cre ...

What could be the reason for Spawn() not being invoked?

After working with node.js and express for some time, I have encountered a persistent bug in my code. In my service file, there is a resolved Promise where I call spawn(), but for some reason, the spawn code never gets executed (or if it does, ls.on(' ...

Storing map tiles offline in React-Leaflet

One common method I have come across for storing tiles offline with Leaflet involves using localforage. Here's an example: const map = L.map("map-id"); const offlineLayer = L.tileLayer.offline('https://server.arcgisonline.com/ArcGIS/res ...

Uncovering Inline Styles Infused with Javascript for Effective Debugging of Javascript Code

SITUATION: I have recently inherited a website from the previous developer who has scattered important functions across numerous lengthy JS files. I am struggling to track down the source of an inline CSS style within the JS or identify which function is d ...

Collecting numerous user-input data from dynamically generated fields

I am working on a simple form in Laravel where users can add multiple forms dynamically using AJAX. Here is the link to my code on jsfiddle: dynamic adding field by user Below is the HTML structure: <form id="paramsForms"> {{csrf_f ...

The function does not provide an output of an Object

I have two JavaScript classes, Controller.js and Events.js. I am calling a XML Parser from Events.js in Controller.js. The Parser is functioning but not returning anything: SceneEvent.prototype.handleKeyDown = function (keyCode) { switch (keyCode) { ...

Utilize the npm module directly in your codebase

I am seeking guidance on how to import the source code from vue-form-generator in order to make some modifications. As a newcomer to Node and Javascript, I am feeling quite lost. Can someone assist me with the necessary steps? Since my Vue project utilize ...

I'm wondering why myDivId.toggle() is functioning properly but myDivClass.toggle() is not working as expected

Using JQuery's toggle() function, I have been able to hide and show some DIVs successfully. Recently, I discovered relationships between certain DIVs that allowed me to group them into a class. I decided to try toggling the entire class rather than ...

Investigate duplicate elements within nested arrays using the 3D array concept

I am dealing with an array that contains 3 subarrays. Arr = [[arr1],[arr2],[arr3]] My task is to identify and store the duplicate values found in these subarrays ([arr1],[arr2],[arr3]) into a separate array. Arr2 = [ Duplicate values of arr 1,2,,3 ] What ...

Having trouble with CORS errors persisting despite configuring CORS options for Google Authentication on React/Node/Passport

Currently, I'm in the process of developing a basic application using React for the frontend and Node/Express/MongoDB for the backend. User authentication is being handled through Passport, with local authentication and Google authentication both func ...

The Stepper StepIconComponent prop in MUI is experiencing issues when trying to render styles from the styles object, leading to crashes in the app

Struggling to find a way to apply the styles for the stepper component without using inline styles. I attempted to replicate Material UI's demo, but encountered an error. The code from Material UI's demo that I want to mimic is shown below: http ...

Managing errors in jQuery's .ajax function

Having some issues with jQuery.ajax() while trying to fetch an html code snippet from table_snippet.html and replacing the element in my html code. The error handler in jQuery.ajax() gets triggered instead of the expected success handler. <!DOCTYPE H ...

Fetching data in a post request seems to be causing an issue with FormData image being

I've implemented a profile picture file upload system with the following HTML: <form enctype="multipart/form-data" id="imageUpload" > <img id="profileImage" src="./images/avatar.png& ...

A Node.js function may not provide a response immediately due to a pending request

Here is a simple upload method using node.js and express.js: upload: function(req, res, next){ // Loop through each uploaded file async.each(req.files.upload, function(file, cb) { async.auto({ // Create new path and unique file ...

Updating a hyperlink with data dynamically upon clicking a different button using jQuery

I need to create a script that will add the id of 'peter' to the hyperlink of anchor 'jack' when 'peter' is clicked. <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery. ...

Import reactjs modules without the need for Browserify, Webpack, or Babel

I am attempting to set up a TypeScript HTML application in Visual Studio. My goal is to incorporate reactjs v0.14.7 without relying on tools like Browserify. But, how can I utilize the react-dom module in this scenario? Let's set aside TypeScript fo ...

Using ThreeJS to load and display several meshes from a .json 3D file

I downloaded a .json file from an online 3D editor and now I'm facing an issue while trying to load and create 20 instances of it, similar to this example. Sadly, my code seems to be flawed as all 20 instances are behaving as if they are the same obje ...

Triggering server-side code (node.js) by clicking a button in an HTML page created with Jade

I am currently working on developing a web application and have encountered an issue where I need to execute some server-side code when a button is clicked (using the onClick event handler rather than the Submit button). My tech stack includes Node.js, Exp ...

Is there a way to detect in the browser when headphones have been unplugged?

Is there an event to pause the video when the audio device changes, like if headphones get unplugged? I've looked into other questions, but they don't seem to be for browser. Detecting headphone status in C# Detecting when headphones are plugg ...