Stand alone video

Release 5.0.9

Hide border option

Stand alone video

The Stand alone video component supports the option to hide the black border around the video. This enables videos with white backgrounds to merge with the page background. 

Overview

The Standalone Video component allows the content author to place and play inline video from the DAM or embed a video from YouTube.

  • Content must be uploaded either to the Adobe Assets (DAM) or Stryker's YouTube channel.
  • When referencing YouTube content, specify only the ID of the video.
  • When using an AEM video, the video will preload and show the first frame. It is recommended that videos have an image in the first frame so that it serves as a thumbnail when the video is preloaded. Otherwise, if authors choose to use the default auto-generated thumbnail, the video box may appear blank because the first frame is blank.

Example of Standalone Video

Video: How to create a standalone video

Customizing the thumbnail video

Following the migration of the DAM to DM7, there are two options for defining a video thumbnail. The same video is used for the two examples below, but each example utilizes different thumbnail creation methods.

Selecting a frame from the video

Select frame from video
  1. Upload a video into the DAM; avoid using any special characters for the file name or folders. Use only letters or numbers.  
  2. Select the video (blue checkmark), then click the "Properties" tab in the upper left corner.
  3. Click the "Change Thumbnail" button below the video thumbnail preview, then select "Select Frame from Video"
  4. Scrub through video until desired frame is shown.
  5. Click on the blue "Save Change" button, then click on "Save & Close" button on the top right of the screen.

Uploading a DAM image

Select thumbnail form assets
  1. Upload a video into the DAM; avoid using any special characters for the file name or folders. Use only letters or numbers.  
  2. Upload an image for the thumbnail into the DAM and publish it; avoid using any special characters for the file name or folders. Use only letters or numbers.  
  3. Click the "Change Thumbnail" button below the video thumbnail preview, then select "Select Thumbnail from Assets"
  4. Search for thumbnail, then click "Select" at the top right corner.
  5. Click on the blue "Save Change" button, then click on "Save & Close" button on the top right of the screen.
Dynamic Media Settings
  1. Upload an image for the thumbnail into the DAM and publish it; avoid using any special characters for the file name or folders. Use only letters or numbers.  
  2. Go to the image in the DAM and click on it  
  3. In the left rail, select “Renditions” and choose one of the dynamic renditions  
  4. Click the "URL" button at the bottom of the list to get the file name of the image. If the URL button does not appear, the image may not be published.
  5. In the window that appears, copy the text after “stryker/” and before the “?” (e.g. orange text)
    This is your thumbnail name.
    media-assets.stryker.com/is/image/stryker/UserGuide-CustomThumbnail-720?$award_sponsors$  
  6. In the stand alone video component, click the inner "Dynamic Media" component and select the wrench tool.
  7. In the “Dynamic media settings > Viewer Modifiers” enter the text string below, replacing the orange text with the text you copied in step #5. 
    VideoPlayer.posterimage=stryker/your thumbnail name

Release Notes:

2021/07/07 - Updated Viewer Modifiers for custom thumbnail options; removed "preload=0" property.

2021/07/28 - Provided clarity on naming requirements and noted that the images need to be published in order for the URL button to appear.