Embed macro

Last modified by Josué Tille on 2024/12/19 11:20
cogDisplays embed content like videos from video platform and attachment and many other things from external services.
TypeXAR
CategoryOther
Developed by

Oana Tabaranu, Sergiu Dumitriu, Ludovic Dubost, Vincent Massol, Yann Flory, Mohamed Boussaa, Josué Tille

Rating
0 Votes
LicenseGNU Lesser General Public License 2.1

Installable with the Extension Manager

  Download v1.1.0SourcesIssues

Table of contents

Description

Displays embed content like videos from video platform and attachment and many other element from external services.

The Embed Macro displays videos from YouTube, Dailymotion, Vimeo and plays a video attached to your wiki page using Video.js library. mp4, webm and ogv formats are supported.

The Embed Macro can also play attached videos using Dynamic Adaptive Streaming over HTTP (DASH) technique.
You can create DASH videos in your wiki using the XWikiTube extension. Find more details here: XWikiTube application

Usage

Integrate content from external services (see Get URL for each services to see the list of supported services):

{{embed url="<URL>"/}}

Play a video in an attachment:

{{embed attachment="<filename>"/}}

Play a Dynamic Adaptive Streaming over HTTP video (DASH).

{{embed dash="<Space.Page>"/}}

Parameters definition

NameValueDescription
urlStringThe URL to the content. See Get URL for each services for more details how to get the url for each integration.
widthNumberThe width of the embedded video, in pixel. The default value depends of the services to be integrated.
heightNumberThe height of the embedded video, in pixel. The default value depends of the services to be integrated.
referenceStringThe name of the entity to consider in case of an attachment video. See the Model module to understand the concept of references. Available since XWiki 3.4M1.
attachmentStringThe name of the video attachment.
dashStringThe document in which the manifest.mpd file and the video streams are attached.
videoPosterStringThe poster of the video is an image attachment that will be displayed before starting playing the video.
ratioStringPossible values: '1:1', '4:3', '16:9' and '21:9'. When this parameter is provided, the width and height are reset to 100% and the video is fit in the parent container. Available since version 1.13 of the macro. 

Sample Code and Screenshots

Youtube

{{embed url="http://www.youtube.com/watch?v=Titn-yAh74A" width="660" height="440"/}}
{{embed url="http://www.youtube.com/watch?v=Titn-yAh74A" ratio="16:9"/}}
{{embed url="http://youtu.be/Titn-yAh74A" /}}
{{embed url="http://y2u.be/Titn-yAh74A" /}}

youtube.png

Dailymotion

{{embed url="http://www.dailymotion.com/video/x9x04h_wiki-et-reseau-social-xwiki-et-blue_tech"/}}

dailymotion.png

Vimeo

{{embed url="http://vimeo.com/30980990"/}}

vimeo.png

Attachment

{{embed attachment="test-vid.webm"/}}

attachment.png

DASH

{{embed dash="Sandbox.dashsource"/}}

dash.png

x.com

Single tweets

{{embed url="https://x.com/XWiki/status/1808056434883502509"/}}

xdotcom1.png

Profiles and lists

{{embed url="https://x.com/XWiki"/}}

xdotcom2.png

Google Docs, Sheets and Slides

Document

{{embed url="https://docs.google.com/document/d/e/2PACX-1vRqgAxT07IjOqjSgWZk0ZkQWZfcar7EOsb6UWBwUm1iQLDEejoERTT_Foi_b-H899OqKUv0Bebt8LHi/pub"/}}

google_doc_document.png

SpreadSheet

{{embed url="https://docs.google.com/spreadsheets/d/e/2PACX-1vSoZPW8a9r9g6aTjHZe_9t82iaNrl1YLTh8JxBXiqBKigtLBTwmhfsSCsQ-hf2z8LjbmQ4ytayrdfeR/pubhtml"/}}

google_doc_spreadsheet.png

Presentation

{{embed url="https://docs.google.com/presentation/d/e/2PACX-1vRRyfn5yCjQUTxw0Uwqf0FnshVL8lyq-zF96KmeKvwvg3q3sfYTclDvS2IXxwIJXAxHhxNbgm7B3WB6/pub?start=false&loop=false&delayms=3000"/}}

google_doc_presentation.png

Google Calendar

{{embed url="https://calendar.google.com/calendar/embed?src=c_bd971ab39b5137f95ecaebcbedf921038a583409a975bf19cbb627a266708198%40group.calendar.google.com&ctz=Europe%2FParis"/}}

google_calendar.png

Google Maps

Place and address

{{embed url="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d1312.1621032817725!2d2.3470581518166553!3d48.87109578026282!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47e6704b350c3f25%3A0xd85ac245a150c9ab!2sXWiki%20SAS!5e0!3m2!1sen!2sch!4v1728035046545!5m2!1sen!2sch"/}}

google_map_1.png

Street view

{{embed url="https://www.google.com/maps/embed?pb=!3m2!1sen!2sch!4v1728035350247!5m2!1sen!2sch!6m8!1m7!1s_Q1WBR0ylI8PUkhxsAGBpA!2m2!1d48.87086003822085!2d2.347896164034983!3f166.78051947633722!4f0!5f0.7820865974627469"/}}

google_map_2.png

Search result

{{embed url="https://www.google.com/maps/embed?pb=!1m16!1m12!1m3!1d5248.647450516318!2d2.3428453507656255!3d48.87110495643666!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!2m1!1srestaurant!5e0!3m2!1sen!2sch!4v1728035213602!5m2!1sen!2sch"/}}

google_map_3.png

Facebook

video

{{embed url="https://www.facebook.com/watch/?v=778496920973542"/}}
{{embed url="https://fb.watch/u-umz3uyJB/"/}}

facebook_1.png

post

{{embed url="https://www.facebook.com/XWiki/posts/pfbid02W3245cRQxohsVknkQyJZGpTjuGsSP7rtqLeUNWCMs3t2WM78RqZomf4Mh1h6T5b3l"/}}

facebook_2.png

LinkedIn

{{embed url="https://www.linkedin.com/embed/feed/update/urn:li:share:7247891523147591680"/}}

linkedin.png

Figma

design

{{embed url="https://www.figma.com/design/ZutVsynFhk44OyJR2uvsUm/embedded-example-for-design?t=Wc0z8omIO1a0EK5R-0"/}}

figma_1.png

board

{{embed url="https://www.figma.com/board/CR4s8D45CzkNL8tDDaAAyy/embedded-example-for-board?node-id=0-1&t=Wc0z8omIO1a0EK5R-1"/}}

figma_2.png

slide deck

{{embed url="https://www.figma.com/slides/kpcVNgVgFoSSIb6zIYkZSl/embeded-example-for-deck?node-id=1-23&node-type=slide&t=Wc0z8omIO1a0EK5R-0"/}}

figma_3.png

Spotify

song

{{embed url="https://open.spotify.com/track/2TI02l6A7NQR12nxMwego4?si=eec9bbe07ca5495f"/}}

spotify_1.png

{{embed url="https://open.spotify.com/intl-fr/track/3yDRcs0Y4pPzkvMbUfeF9H"/}}

spotify_2.png

album

{{embed url="https://open.spotify.com/album/394IM22DYC24k1X1fqzIiF?si=5xPJFDqjS8CFGDZ3mTChkw"/}}

spotify_3.png

artist

{{embed url="https://open.spotify.com/artist/1YkHCcMgZ6fTQMeEQyYKTf?si=1JN813AtTV-A1Af32F_KoQ"/}}

spotify_4.png

playlist

{{embed url="https://open.spotify.com/playlist/37i9dQZF1DX8AliSIsGeKd?si=de08d6bd36124e91"/}}

spotify_5.png

Prezi

{{embed url="https://prezi.com/view/SEuA3wOFhVxPmClZfY2Z/"/}}
{{embed url="https://prezi.com/p/embed/SEuA3wOFhVxPmClZfY2Z/"/}}

prezi.png

Scribd

{{embed url="https://fr.scribd.com/document/91758925/Xwiki-Install"/}}

scribd.png

Flickr

Photo

{{embed url="https://www.flickr.com/photos/30943631@N07/19491843224/in/album-72157656512082491"/}}

flickr_1.png

Video

{{embed url="https://www.flickr.com/photos/seclusivenature/52095586779/in/photolist-2nnvuY4-2nie6MB-2oPiL1v-2phiPyZ-2mmcvHN-2jTPNWF-P7amB7-2qekVKa-2jmiFRN-2ntPAwr-2oevvfv-v7CkWf-2nmJKsS-2q7vqqz-2o38ts4-E1bRDU-2q6PXxY-2pAU8FQ-2m153Ao-2obaFEp-2nJtUDz-2mKH14f-2i6GE5t-2mGSHDT-2jiGu1h-2oi5VWQ-2mX3dKp-2mRVrd3-2mG7CLf-2mYwgJs-2m7aCxo-2mMWpyT-2o7rZFa-2nMtPSs-23T36Jk-2oMDf9R-2nLGUMJ-MDNQNY-2oA1xXL-24zxuDu-2pyXh87-2nwsCSv-2opXreK-Qy399A-2nyC7H9-2nqWqTd-VgqJ5F-2meMAGq-G76w5x-2oFoz1h"/}}

flickr_2.png

Album

{{embed url="https://www.flickr.com/photos/30943631@N07/albums/72157656512082491"/}}

flickr_3.png

Galery

{{embed url="https://www.flickr.com/photos/30943631@N07/"/}}

flickr_4.png

Slideshare

{{embed url="https://fr.slideshare.net/slideshow/xwiki-sas-presentation/930541"/}}
{{embed url="https://www.slideshare.net/slideshow/embed_code/key/DeVayEMZSEP0gY?startSlide=1"/}}

slideshare.png

Viddler

{{embed url="https://www.viddler.com/v/1391b468"/}}
{{embed url="//viddler.com/embed/1391b468/?f=1&autoplay=0&player=full&secret=59822701&make_responsive=false&loop=false&nologo=false&disableseek=false&disablebackwardseek=false&disableforwardseek=false&hd=false"/}}

viddler.png

Aha! roadmaps

{{embed url="https://example.aha.io/shared/ciib292b37aa2a8b3c0d1ba1333e4c3d"/}}

aha_roadmap.png

Get URL for each services

youtube

You can just copy the link from the URL of the browser.

dailymotion

You can just copy the link from the URL of the browser.

vimeo

On the video click on the "Share" button. And then copy the link from the share popup.

x.com

Single tweets

You can just copy the link from the URL of the browser.

Profiles and lists

You can just copy the link from the URL of the browser.

Google Docs, Sheets and Slides

Document

Click on "File" menu, then click on "share" > "Publish to web". On the popup click on "Publish" and copy the link from the "Link" tab.

SpredSheet

Click on "File" menu, then click on "share" > "Publish to web". On the popup click on "Publish" and copy the link from the "Link" tab.

Presentation

Click on "File" menu, then click on "share" > "Publish to web". On the popup select the settings of the presentation and click on "Publish" and copy the link from the "Link" tab.

Google Calendar

Open the calendar settings. On the left panel, select the calendar that you would like to show. On the main page, scoll down until the "Integrate calendar". Copy the link "Public URL to this calendar".

Google Maps

Place and address

On the left panel, click on the share button. Then, click on the "Embed a map" tab and retrive the url from the html code.

Street view

Click on the menu button (on the top left). On the left tab, click on "Share or embed map". Then, click on the "Embed a map" tab and retrive the url from the html code.

Search result

Click on the menu button (on the top left). On the left tab, click on "Share or embed map". Then, click on the "Embed a map" tab and retrive the url from the html code.

Facebook

video

Open a video, click on share button. On the popup, click on "Copy link".

post

Open a specific post and just copy the link from the URL of the browser.

LinkedIn

Click on the menu of a post you want to embed (on the corner top rignt of the post). Click on "Embed this post" and retrive the url from the html code.

Figma

For figma design, figma board or figma slide deck, you can just copy the link from the URL of the browser.

Spotify

song

Click on the menu of the song (3 dot on the right of the song) then on "Share" and on "Copy link to the song".

album

Click on the menu of the album then on "Share" and on "Copy link to the album".

artist

Click on the menu of the artist then on "Share" and on "Copy link to the artist".

playlist

Click on the menu of the playlist then on "Share" and on "Copy link to the playlist".

Prezi

On the project list page, click on the menu of a project (3 dot on buttom right of the project) and then click on "Share and confidentiality". On the popup, click on "Copy link".

Scribd

You can just copy the link from the URL of the browser.

Flickr

Photo

Open the image and then just copy the link from the URL of the browser.

Video

Open the video and then just copy the link from the URL of the browser.

Album

Open the album (page where you have the content list of the album) and then just copy the link from the URL of the browser.

Galery

Go on the galery section and then just copy the link from the URL of the browser.

Slideshare

You can just copy the link from the URL of the browser.

Viddler

You can just copy the link from the URL of the browser.

Aha! roadmaps

  1. Go in your Aha! account
  2. Navigate to Settings ⚙️ -> Account -> Integrations.
  3. Click + to add a new integration.
  4. Select Confluence.
  5. Check the box next to Enable.
  6. Go on the roadmaps to integrate.
  7. Click on share button and on webpage
  8. Enable the "Enable share as webpage" button
  9. Click on "Copy link" button to get the link ot past on embed macro url parameter.

Prerequisites & Installation Instructions

We recommend using the Extension Manager to install this extension (Make sure that the text "Installable with the Extension Manager" is displayed at the top right location on this page to know if this extension can be installed with the Extension Manager). Note that installing Extensions when being offline is currently not supported and you'd need to use some complex manual method.

You can also use the following manual method, which is useful if this extension cannot be installed with the Extension Manager or if you're using an old version of XWiki that doesn't have the Extension Manager:

  1. Log in the wiki with a user having Administration rights
  2. Go to the Administration page and select the Import category
  3. Follow the on-screen instructions to upload the downloaded XAR
  4. Click on the uploaded XAR and follow the instructions
  5. You'll also need to install all dependent Extensions that are not already installed in your wiki

Release Notes

v1.1.0

Add support for Aha! roadmaps

v1.0.2

Fixed source link

Dependencies

Dependencies for this extension (org.xwiki.contrib.embed:embed-macro-ui 1.1.0):

About

About

Support

Platform

User Guide

Admin Guide

Developer Guide

Projects

XWiki

Extensions

Other

Contribute

Status

Practices

Under the Hood

Get Involved

Get Connected