CODEWITHSUNDEEP
facebookvideo
uwe
uwe

Reputation: 4077

How to autoplay embedded Facebook videos?

This page shows how to create the embed code for any Facebook video to embed them in external websites.

Is there a way to start the playback automatically on page load?

Upvotes: 10

Views: 60235

Answers (8)

yotammanor
yotammanor

Reputation: 318

The answers here are slightly outdated, so just the have the updated answer around, you can see the Facebook Documentation for all the details.

TL;DR:

This is how embedding a video from Facebook Looks like:

<html>
<head>
  <title>Your Website Title</title> 
</head>
<body>

  <!-- Load Facebook SDK for JavaScript -->
  <div id="fb-root"></div>
  <script>(function(d, s, id) {
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) return;
    js = d.createElement(s); js.id = id;
    js.src = "//connect.facebook.net/en_US/sdk.js#xfbml=1&version=v2.6";
    fjs.parentNode.insertBefore(js, fjs);
  }(document, 'script', 'facebook-jssdk'));</script>

  <!-- Your embedded video player code -->
  <div class="fb-video" data-href="https://www.facebook.com/facebook/videos/10153231379946729/" data-width="500" data-show-text="false">
    <div class="fb-xfbml-parse-ignore">
      <blockquote cite="https://www.facebook.com/facebook/videos/10153231379946729/">
        <a href="https://www.facebook.com/facebook/videos/10153231379946729/">How to Share With Just Friends</a>
        <p>How to share with just friends.</p>
        Posted by <a href="https://www.facebook.com/facebook/">Facebook</a> on Friday, December 5, 2014
      </blockquote>
    </div>
  </div>

</body>
</html>

The following html tag lets you set autoplay to true:

<div class="fb-video" data-href="<video-post-url>" data-autoplay="true">

Default value for data-autoplay is of course false.

Upvotes: 0

Estev&#227;o Lucas
Estev&#227;o Lucas

Reputation: 4678

The best way for me is to use Facebook URL like this: https://www.facebook.com/v2.3/plugins/video.php?allowfullscreen=true&autoplay=true&container_width=800&href=https%3A%2F%2Fwww.facebook.com%2Fredbull%2Fvideos%2F10155801793140352%2F&locale=en_US&sdk=joey

It's better than the embed url. The video fits in viewport, you can control autoplay with a query string/param.

Upvotes: 12

Warren Wang
Warren Wang

Reputation: 81

As of the latest Facebook SDK today, you are able to autoplay videos passively by adding data-autoplay="true" to the div tag of the embed code.

Reference: https://developers.facebook.com/docs/plugins/embedded-video-player

I've just implemented this on my own project and it does work but as of right now it will only play passively (in mute mode). This is a similar experience as what you would see if you were scrolling through your news feed on Facebook. The user has to manually unmute the video.

I hope this helps.

Upvotes: 3

user2428118
user2428118

Reputation: 8104

Since I don't have a video ID, I can't test it, but adding a "play" or "autoplay" parameter may work:

<object width="400" height="224" >
 <param name="allowfullscreen" value="true" />
 <param name="allowscriptaccess" value="always" />
 <param name="movie" value="http://www.facebook.com/v/xxx" />
 <param name="autoplay" value="true" />
 <embed src="http://www.facebook.com/v/xxx" type="application/x-shockwave-flash"
   allowscriptaccess="always" allowfullscreen="true" width="400" height="224" autoplay="true">
 </embed>
</object>

Upvotes: 0

Justin Pearce
Justin Pearce

Reputation: 5097

For Youtube, add &autoplay=1 at the end of the URL used to autoplay the video. For example:

If the URL to get to the video is:

http://www.youtube.com/v/xxx

The autoplay URL is:

http://www.youtube.com/v/xxx&autoplay=1

The above works for Youtube, but Facebook is a little different:

In the embed portion of the code to autoplay the video on your site add the following parameter:

<param name="autoplay" value="true">

This method works on other sites as well, mostly those that use a Flash-based video player.

Upvotes: 3

Denny Mueller
Denny Mueller

Reputation: 3615

waitforclick

Indicates whether to autoplay the Flash object (false) when allowed. false does not work in profiles for security and aesthetic reasons, except after an AJAX call. Default value is true

https://developers.facebook.com/docs/reference/fbml/swf/

U have to change the the example code from the bottom to the the facebook video, like in your provided link explained.

Didnt tried it, but maybe it helps

regards

Upvotes: 0

toomanyairmiles
toomanyairmiles

Reputation: 6485

Unfortunately for you Facebook's policies forbid the autoplaying of content (thank god).

I have attempted to track down the actual policy document but it's been drowned out in the SERPS noise of people talking about it being banned on Facebook!! You can find questions that back this notion up on StackOverflow and WebApps.

StackOverflow is the official Facebook developer support channel so their users may know more on the topic.

It's also possible some whizzy jQuery might be able to fake the click, - but facebook updates it's code so often that I doubt any hack would last long.

Best answer is use YouTube or another channel that allows you so share outside their network. Don't rely on a hacky solution for a network that clearly isn't interested in video being shared beyond it's own borders.

Users can easily change the privacy settings on their videos, and Facebook will probably try and disrupt the ability to embed their content if it becomes a popular thing to do.

Upvotes: 8

Jaryd Buggins
Jaryd Buggins

Reputation: 134

it shouldn't matter which videos you are embedding. adding the code

&autoplay=1

to the end of the URL of the video you are embedding should resolve the issu and allow the video to play automatically.

Upvotes: -3

Related Questions