TABLE OF CONTENTS

• Embedding Options
  • Shortcode Embed
    • How to Format the Shortcode
    • How to Find the Video ID
    • YouTube Example Shortcode
    • Vimeo Example Shortcode
    • Additional Shortcode Display Options
  • "Insert Media" Button
  • Using an Embed Code
• How to Get more Help

Embedding Options

There are three different methods you can use to embed videos on our SilverStripe sites:

1. Shortcode
2. Media button
3. Service Embed Code

Each of these methods has advantages and drawbacks, but some rules of thumb:

• For YouTube or Vimeo embeds that will not have a caption under them on the page: Shortcode Embed.
• For any video that requires a caption on the page: Media Button
• When none of the above works or you wish to start playback at a specific timecode (or use another feature of the service): Service Embed Code

Confused? Using YouTube or Vimeo? Go with the Shortcode.

Shortcode Embed

This option is available only for Vimeo and YouTube videos and does not allow you to add a caption to the page. To embed with a caption on the page, use the Media Button. To embed from a different streaming platform (other than Youtube or Vimeo), you may use either the Media Button or Service Embed Code.

1. Type a shortcode (enclosed in brackets) directly into the content window of the page (more in "Shortcode Format" below). 
2. "Save" to preview the video embed. (It will not show up in the content window but will show up in the page preview in draft.)
3.  “Save & Publish" the page when you are satisfied with the preview.

How to Format the Shortcode

[youtube id="XXXXX"]

or for vimeo

[vimeo id="XXXXX"]

XXXX represents the video identifier, the last URL segment of the "share" link.

How to Find the Video ID

To find the video ID on either service, from the page of the desired video

1. Select share, then

2. Select the shareable link.

3. Copy the string of numbers and/or characters that follow the last / in the URL.

Examples follow.

YouTube Example Shortcode

Type this directly into the content window:

[youtube id="A-Tod1_tZdu"]

Vimeo Example Shortcode

Type this directly into the content window:

[vimeo id="341685826"]

Additional Shortcode Display Options

If you don't like the default size/aspect ratio of the embedded video, you can manually control it by adding some extra parameters to your shortcode using the following format:

[youtube id="alphanumericID" parameter=XXX]

The available parameters are

• 16:9 aspect ratio: "aspect=wide"
• 4:3 aspect ratio: "aspect=standard"
• Custom width/height= "width=XXX height=XXX"

Examples for using each of these options follow:

16:9 ASPECT RATIO

[youtube id="alphanumericID" aspect=wide]

4:3 ASPECT RATIO

[youtube id="alphanumericID" aspect=standard]

CUSTOM SIZING

Directly control the width and height (expressed in pixels) of the display using the following parameters. 

[youtube id="alphanumericID" width=XXX height=XXX]

You must specify both width and height if you use these parameters. The defaults are zero, so your video will not display if only one of the parameters is used.

[youtube id="alphanumericID" width=900 height=400]

[vimeo id="58386459" width=640 height=460]

"Insert Media" Button

1. Place your cursor in the content window where you wish the video appear on the page.
    
   
2. Select the "Insert Media" button (looks like a little tree, for reasons known only to the developers).
   
   
3. In the pop-up window select "From the web." 
4. Paste the share URL into the box
5. Click "Add URL"
6.  Select "Edit" from under "Details and dimensions"

4. Enter your caption, if you have one, select an alignment (usually "Left on its own" or "Centered, on its own") and adjust the width, if necessary. 600 px Width will stretch across most of the center column.

5. "Save" to see how the embed looks on your page.

Using an Embed Code

To use the embed code provided by services like Vimeo and Youtube, 

1. Copy the embed code from the service.
2. In the content window, select the HTML button (see screenshot below for the location of the button).
3. In the pop-up window, place your cursor where you'd like the embed to appear. Hit enter once or twice to get a clear view of where you are putting the video, and paste the embed code using (CTRL-V or COMMAND-V).
4. Save to preview your embed and adjust as necessary.
   
   
5. 

How to Get More Help

If you need help, please open a ticket at cscomms.lbl.gov.