Getting your Code from a Video Post
1. Navigate to your Video Post
Embed Video
from the options menu:Embed Video
button on the bottom right:For Pages only
Embed Video
from the drop down menu: (For Pages only)2. Copy and Paste Code
Add Code Manually
1. Get Video Post URL
"https://www.facebook.com/FacebookDevelopers/videos/10152454700553553/"
2. Load JavaScript SDK
<body>
tag:<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.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
3. Place Embedded Video Player Tag
{your-video-post-url}
with your posts' URL.<div class="fb-video" data-href="{your-video-post-url}"
data-allowfullscreen="true" data-width="500"></div>
4. Testing
<html>
<title>My Website</title>
<body>
<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.3";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<h1>My Video Player</h1>
<div class="fb-video"
data-href="https://www.facebook.com/FacebookDevelopers/posts/10151471074398553"
data-width="500"
data-allowfullscreen="true"></div>
</body>
</html>
5. Customizing
Getting a video post's URL
- Copy the URL of the permalink from your browser's address bar.
- Right-click the post's publishing time and copy the link address.
Via Graph API
/{page-id}/videos
in the following format (shortend):{
"data": [
{
"id": "1234567890",
"created_time": "2015-02-25T23:22:06+0000",
"description": "My Video Caption",
"embed_html": "<iframe src=\"https://www.facebook.com/video/embed?video_id=1234567890\" width=\"1280\" height=\"720\" frameborder=\"0\"></iframe>",
"format": []
}
]
}
id
value to create a URL following the structure:"https://www.facebook.com/video.php?v={id}"
embed_html
for embedding videos. For more information about this topic, please refer to the FAQ sectionLayout on Desktop
data-width
attribute in the Embedded Video Player tag as shown in the example below. The value must at least by 220
. There is no limit on the upper end, yet the player will never become bigger than its parent element.<!-- WRONG! -->
<style type="text/css">
.fb-video {
width: 500px;
}
</style>
<div class="fb-post" data-href="{your-video-post-url}"></div>
<!-- CORRECT -->
<div class="fb-video" data-href="{your-video-post-url}"
data-allowfullscreen="true" data-width="500"></div>
Fullscreen
data-allowfullscreen="true"
to allow the video to be played in fullscreen mode.Layout on Mobile Web
Adjust Language
js.src
to use your locale: Just replaced en_US
by your locale, e.g. fr_FR
for French (France): js.src = "//connect.facebook.net/fr_FR/sdk.js#xfbml=1&version=v2.3";
Wordpress
fb-video
tag to your post:<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553"
data-width="500" data-allowfullscreen="true"></div>
&
chars to #038;
and break the player.<script>window.fbAsyncInit = function() {
FB.init({
xfbml : true,
version : 'v2.3'
});
}; (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";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>
<div class="fb-video" data-href="https://www.facebook.com/video.php?v=10152795258318553" data-width="500" data-allowfullscreen="true"></div>
FAQ
Can I use the Graph API video
property embed_html
?
embed_html
. Use the Embedded Video Player plugin instead!About the embed_html
property:
video
will serve a property named embed_html
. Its value will contain an HTML element that may be embedded in a Web page to play the requested video.embed_html
property's value, your video player will:- Not work on mobile devices and tablets
- Not contain any additional information like views, video title, etc.
Example for embed_html
property (deprecated):
{
"embed_html":
"<iframe
src=\"https://www.facebook.com/video/embed?video_id=1234567890\"
width=\"1280\"
height=\"720\"
frameborder=\"0\">
</iframe>"
}
Join our Telegram Channel https://t.me/eduvibeschannel
if you want to share your story or article for our Blog please email us at educratsweb@gmail.com >>