Streaming live at 10am (PST)

Trouble embeding Kickstarter videos


#1

Hi,

I have a web magazine where I post articles. I’m trying to embed videos into the articles and youtube videos work perfect. However, when I embed videos from Kickstarter I get this black bar at the bottom. Picture of the problem. I tried messing with the height but it does not seem to do anything.

How can I fix this?

Link to article with Kickstarter video

Link to article with Youtube video

Read-only link


#2

Hello @SelectDesires

I was playing around with your project and did some research, apparently this is more a Kickstarter problem rather than your embed in Webflow.

There is a cool alternative out there called Embed.ly that can handle this for you. Maybe this can help you solve the issue.

Hope this helps.


#3

Hey @SelectDesires

Videos normally have an aspect ratio of 16:9. To translate this into a responsive design, video elements have a width of 100% and top padding of 56.25%. The video element in Webflow is doing the calculations automatically based on what the video embed is telling it.

Seems that the Kickstarter video is passing along the wrong size information as it also displays incorrectly in the CMS input, as @aaronocampo also just said. I believe the the video element is already using Embed.ly just like the Rich Text Element does.

Does Kickstarter give you any other embed options for videos? You could use a custom html embed element to have more control.


#4

Hi, @matthewpmunger

Thanks for your answer. Kickstarter gives some more control over the video embed here. However I’m not sure how to implement that into a CMS article if it is even possible.


#5

You can embed it with the iFrame code and then pull the link from your CMS dynamically.


#6

Set the structure up like this with an HMTL Embed as a child of a Div.
Give the div a class name of Video with a combo class of Kickstarter. On the combo class add the 56.25% top padding. Give the html embed a position of Absolute and Full. See pics below.

23

Paste the following code into the html embed

<iframe width="100%" height="100%"src="https://www.kickstarter.com/projects/930892225/titan-the-deepest-diving-underwater-drone-for-ever/widget/video.html" frameborder="0" scrolling="no"> </iframe>

In the CMS Collection settings, add a new url field (not a video field) and call it something like Kickstarter Video Link. Then in the embed replace the url with that new field. See example below except don’t choose “Orange Button Link” instead choose the new url field.

Lastly you’ll need to set conditions so that the page knows when to use the Kickstarter video embed or the regular video element.

Set the kickstarter div to only show when the kickstarter url is set.
Set the video element to only show when a video url is set.

Hope that helps. Happy designing!


#7

@matthewpmunger

Thank you so much, now it works perfectly!


#8

Always glad to help!