How to (correctly) embed a Facebook video?

Question

I'm trying to embed a Facebook video in my site using the snippets generated by the Facebook Embedded videos page.

Having done so, I add this function to a custom, site specific plugin so as to load the FB javascript API:

add_action('wp_head', 'js_sdk_wp_head');
function js_sdk_wp_head(){
  ?>
  <div id="fb-root"></div>
  <script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v3.3"></script>
  <?php
}

I then use the code editor to add the following to the page:

<!-- wp:html /-->

<div class="fb-video" data-href="https://www.facebook.com/watch/?v=12345" data-width="500" data-show-text="false">
</div>

And when I do so, nothing happens, (apart from a blank line being inserted into the WP post).

What am I doing wrong?

Answer 1

It worked correctly for me, however I used the wp_enqueue_scripts hook to add the JavaScript.

function mytheme_enqueue_scripts() {
    wp_register_script('facebook-video', 'https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v3.3', '', '');
    wp_enqueue_script('facebook-video');
}

add_action('wp_enqueue_scripts', 'mytheme_enqueue_scripts');

• Do you see any errors in your browser console or network tab?
• Do you see the JS added to your page if you inspect?