It's easy to add videos to your Rocketspark website. Currently, our Video block doesn't support Facebook videos however you can embed Facebook videos via our HTML code block.
If you want to use Vimeo or Youtube check out our help guide to add Video block here.
Embedding Facebook Videos
1. Get an <iframe> embed code from your Facebook page for your Facebook video. https://www.facebook.com/help/1570724596499071
-> Copy your <iframe> code.
2. Go to your website and add an HTML code block.
3. Paste in the code and click save.
Experts: How to make my Facebook video responsive on mobile.
You may need to edit this code you received from Facebook to make it responsive on mobile.
Example iframe code:
<iframe src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Fsevensharp%2Fvideos%2F1107499423069458%2F&show_text=false&width=560" width="560" height="314" style="border:none;overflow:hidden" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowFullScreen="true"></iframe>
1. From the iframe code you got from Facebook delete the width and height tags.
width="560" height="314"
2. Append to the style tag on the <iframe the following properties.
width:100%; height:100%; position:absolute; top: 0; left: 0;
The new style tag should look like:
style="border:none;overflow:hidden; width:100%; height:100%; position:absolute; top: 0; left: 0;"
3. Wrap the iframe in a <div> tag
<div style="position: relative; width: 100%; padding-top: 56.25%;">
The padding-top setting here is how you can control the aspect ratio of the video.
16:9 = 56.25%
4:3 = 75%
4. Don't forget to close the div tag, add the following after the </iframe>.
</div>
The end result should look like this:
<div style="position: relative; width: 100%; padding-top: 56.25%;">
<iframe src="https://www.facebook.com/plugins/video.php?height=314&href=https%3A%2F%2Fwww.facebook.com%2Fsevensharp%2Fvideos%2F1107499423069458%2F&show_text=false&width=560" style="border:none;overflow:hidden; width:100%; height:100%; position:absolute; top: 0; left: 0;" scrolling="no" frameborder="0" allowfullscreen="true" allow="autoplay; clipboard-write; encrypted-media; picture-in-picture; web-share" allowFullScreen="true"></iframe>
</div>
If you get stuck please contact support@rocketspark.com for some help.