Embedding a Facebook video so it plays in your app is a straightforward process.
First, here is a link to the directions from Facebook since they may be updated from time to time:
https://www.facebook.com/help/1570724596499071?helpref=uf_permalink
The current directions are as follows:
- Open Facebook on a computer.
- Go to the video you want to embed.
- Click
and select Embed. Keep in mind that you will only see this option if the video's audience is set to
Public.
- Copy the code that appears and paste it on your website or web page.
See sample images below:
Once you copy the code, you will paste into in an HTML Action on the platform to embed the video in your App. The HTML action will also let you add a title and control the background color behind the video if you want.
After pasting the HTML code into the HTML action, there is one minor adjustment you might want to make. You will notice a height and width dimension in the code which is commonly 560 x 315. This is the default dimension for a desktop computer. It sometimes looks good on mobile (try it), but you may want to adjust these dimensions for mobile.
We recommend replacing the “560” height with a “320” and the “315” width with a “180”, so that the resulting HTML is modified from the original version below to a mobile-friendly version:
Original HTML from Facebook:
<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Finhisgripgolf%2Fvideos%2F2937315692951091%2F&show_text=0&width=560" width="560" height="315" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
HTML after height and width adjusted for mobile:
<iframe src="https://www.facebook.com/plugins/video.php?href=https%3A%2F%2Fwww.facebook.com%2Finhisgripgolf%2Fvideos%2F2937315692951091%2F&show_text=0&width=560" width="320" height="180" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowTransparency="true" allowFullScreen="true"></iframe>
Comments
0 comments
Please sign in to leave a comment.