Embed a streamable video in a page

[Cedric Van Daele]

Hello

I have a streamable link like https://streamable.com/xxxxx that when opened displays a short video. I want to embed this video in a confluence page.

When I use the widget connector it just shows the link to streamable.com and an icon (see below).

Is there no way to embed a streamable video through the url? The original video on my local hard disk turns out to be corrupted. So i'm looking for any way to use the streamable video which still works.

When I open the video through the url I have an option to embed and it gives me this text:

<div style="width: 100%; height: 0px; position: relative; padding-bottom: 56.250%;"><iframe src="https://streamable.com/s/xxxxx/vagjyd" frameborder="0" width="100%" height="100%" allowfullscreen style="width: 100%; height: 100%; position: absolute;"></iframe></div>

Can I use this to embed the video on the confluence page? How would I do that? If I paste it directly in a page it just shows the text as seen above.

Thanks for your help.

Kind regards

Cedric

[Lava Kumar Dukanam _Appfire_ · Accepted solution]

Hi @Cedric Van Daele,

I'm not sure about streamable.com integration with confluence, but give it a shot with HTML macro and the embeddable HTML code that streamable gave you.

You might also want to take a look at this user macro by David Simpson.

## Macro title: HTML5 Video
## Macro has a body: N
##
## @param width:title=Width|type=string|required=false|desc=Video width
## @param height:title=Height|type=string|required=false|desc=Video height
## @param poster:title=Poster|type=string|required=false|desc=Set a placeholder image
## @param src:title=Source|type=string|required=true|desc=Attached video filename
## @param External:title=External Video|type=boolean|required=true
## @param Override:title=Override Extension|type=string|required=false|desc=Enter file extension to override

#if ( $paramExternal != "true" )
 #set ( $attachment = $content.getAttachmentNamed($paramsrc) )
 #set ( $extension = $attachment.getFileExtension() )
 #set ( $path = $attachment.getDownloadPath() )
#else
 #set ( $last3 = $paramsrc.length() - 3 )
 #set ( $extension = $paramsrc.substring($last3) )
 #set ( $path = $paramsrc )
#end

#if ( $paramOverride )
 #set ( $extension = $paramOverride )
#end

#if ( $extension == "m4v" )
 #set ( $mimetype = "video/mp4" )
#else
 #set ( $mimetype = "video/" + $extension )
#end

<video controls="controls" 
 #if ($paramwidth) width="$paramwidth" #end
 #if ($paramheight) height="$paramheight" #end
 #if ($paramposter) poster="$paramposter" #end ## Set a placeholder image for the video
 src="$path">
 <source type="$mimetype" src="$path" />
</video>
<p>
 <strong>Download video:</strong> <a href="$path">$extension format</a>
</p>

Thanks,

Lava

[Cedric Van Daele]

Hello Lavakumar Dukanam

Thank you for your reply and help.

I tried adding the code to the HTML macro, but it did nothing, unfortunately.

When I select the list of macro's or start by typing { then I don't see the HTML5 macro mentioned anywhere. How do I add this macro to my page? We use the cloud version.

Thanks!

[Lava Kumar Dukanam _Appfire_]

Hi @Cedric Van Daele,

Unfortunately, User Macros are one of the restricted features of confluence cloud. Only server installations can do it.

https://confluence.atlassian.com/confcloud/functional-differences-in-confluence-cloud-734070955.html

Not sure of your restrictions but why don't you add it to youtube and use widget connector to add it to page? I'm able to do it.

Regards,

Lava