Remove blank white space when including Facebook video

Community resources Bugs
1

When I include a Facebook video in my rich text collection field then I get comments and a ton of extra white space. I included a screenshot of what I mean. I used to be able to add a “no-comments” to the end of Facebook video links, but it no longer works at removing the space.

Screenshot_4
Screenshot_42200×846 153 KB

Thanks!

2

Hey @Kameron2332

Try using data-show-text=false to the url instead of no-comments

3

@matthewpmunger Unfortunately, it didn’t work. Those settings seem to only apply when embedding with an iframe.

4

@Kameron2332 @matthewpmunger did you ever figure out how to remove the comments?

5

Nope, still no solution

6

Made this post last August. Still don’t have a fix. Can someone help?
https://discourse.webflow.com/t/remove-blank-white-space-when-including-facebook-video/

7

Hi there, can you add your share link here?

1 Like
8

https://preview.webflow.com/preview/facebookvideobroken?utm_medium=preview_link&utm_source=designer&utm_content=facebookvideobroken&preview=8a3ec0e7c8b94bcfdcecf525e995df9e&mode=preview

https://facebookvideobroken.webflow.io/example/my-example-post

9

Can I not be forgotten about for another 10 months please. I kinda need this working for my website. @cyberdave @matthewpmunger @QA_Brandon

10

@Kameron2332 the link that I click on does not have a video on it.

Please advise on the right link associated with this post?

11

Not sure what to say, both load up for me. If you are clicking the webflow designer link, click the “Click Me - Example Post” button to be taken to the cms post

Screenshot_4
Screenshot_41802×810 165 KB
Screenshot_3
Screenshot_31818×639 21.3 KB

12

:ok_hand:

Was not sure which way you were directing us.

1 Like
13

Hi @Kameron2332, I hope this helps you?

1 Like
14

Hi @Kameron2332 - The extra space is a byproduct when using Facebook video with the video field. It is caused by Webflow adding an inline style of padding-top=100% to the div.w-video.w-embed wrapper they create , when the source is a FB video that is created via the video field in a collection you add to the template.

Webflow is using Embedly to automatically create the video embed from the URL. If I test an Embedly embed without Webflow wrapping elements, it is fine. When I test the Facebook SDK and embed that way, no issue either.

A quick fix might be to write some custom code that checks the height of the iframe.embedly-embed with a facebook value in src, then read the height value + 53px (for the social links) and use it to set the padding top value of the parent div.w-video.w-embed.

You can test this issue by replacing 100% with 653px here →
https://cl.ly/2531e6efd98a

TLDR;

This looks like a Webflow bug (@Brando). @Kameron2332- I suggest you open a trouble ticket and reference this topic and my post.

1 Like
16

Hi @webdev @Kameron2332

Thanks for pinging me and sorry to hear about the trouble. After testing on this end I can confirm I’m seeing the same behavior when embedding a facebook video into the rich text.

I’ve reported this to our team and we’ll investigate this further to see if we can find a solution. In the mean time you may consider these other options:

I’ll post back here with an update as soon as we have one.

1 Like
17

Heyo everyone,

Just an update here. It looks like this error is caused stemming from how embedly works with Facebook embeds. At this point, this is not something we can control.

That said, we have some updates to the rich text element coming up that will make it possible to work around this. I don’t have a timeframe for you all quite yet, but will post with updates as I learn more. :bowing_man:

1 Like
18

This topic was automatically closed 60 days after the last reply. New replies are no longer allowed.