nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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:

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

Accepted answers

Lava Kumar Dukanam _Appfire_

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

All comments

Lava Kumar Dukanam _Appfire_

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

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Find more posts tagged with

confluence