Video-Only Component: Difference between revisions

Latest revision as of 13:12, 10 July 2026

This is a simple, no-frills component for embedding a video from YouTube or Vimeo. If you're looking for a component that also includes a title, abstract, and/or call-to-action link, consider using the Feature or Feature Link List component instead.

Elements

Title (required, not displayed)
Media – Image (used as the video's poster image if present)
Media – Video

Examples

Interactive Example

The preview below shows the Video-Only component using its default configuration.

To experiment with different settings, open the interactive component playground.

Open Component Playground

Step-by-step Instructions

Select Add New Component → Video-Only.
Optionally, add the Feature Image (optimal dimensions: 1530px × 1020px). If both a Video URL and an Image File are present, the image will be used as the video's poster image. This is the intended behavior but is not required.
- If using an existing image already in the system:
  1. Click the Insert an Image button to launch the image browser.
  2. Navigate to the image under Select Image, select it using the radio button, and click Select Image.
- If using a new image:
  1. Click the Insert an Image button to launch the image browser.
  2. Click Upload Image, then click Browse… to locate the image on your computer. Finally, click Select Image.
Add a Video URL.
- Note: The system expects videos to come from YouTube or Vimeo.
- Videos shared on the College website should include closed captions.
  - Adding captions to a YouTube video
  - Adding captions to a Vimeo video

@@ Line 1: / Line 1: @@
-This a simple, no-frills pane for inserting a video from YouTube or Vimeo. If you're looking for something that also has accompanying '''title''', '''abstract text''', and/or '''call-to-action links''', consider creating a [[Feature Component|'''''Feature''''']] or [[Feature Link List Component|'''''Feature Link List ''''']]component instead.
+{{DrupalBack}}
+This is a simple, no-frills component for embedding a video from YouTube or Vimeo. If you're looking for a component that also includes a '''title''', '''abstract''', and/or '''call-to-action link''', consider using the [[Feature Component|'''Feature''']] or [[Feature Link List Component|'''Feature Link List''']] component instead.
 == Elements ==
 # Title (''required, not displayed'')
-# Media - Image (''used as “poster” image if present)''
+# Media – Image (''used as the video's poster image if present'')
-# Media - Video
+# Media – Video
 == Examples ==
-{{StorybookComponent|id=components-video-only--video-only}}
+{{Callout|type=tip|title=Interactive Example|content=The preview below shows the Video-Only component using its default configuration.
+To experiment with different settings, open the interactive component playground.
+'''[https://toolkit.swarthmore.edu/?path=/story/swarthmore-theme-components-video-only Open Component Playground]'''}}
+{{StorybookComponent|id=swarthmore-theme-components-video-only|toggleState=0}}
 == Step-by-step Instructions ==
-* Select '''''Add new pane''''' '''''> Video-Only'''''.
+* Select '''Add New Component → Video-Only'''.
-* Optionally, add the '''''Feature Image''''' (optimal dimensions: width of 1530px by height of 1020px). If both a '''''Video URL''''' and '''''Image File''''' are present, the image will be used as the video’s “poster image”. This is the way the system is intended to be used but is not required.
+* Optionally, add the '''Feature Image''' (optimal dimensions: '''1530px × 1020px'''). If both a '''Video URL''' and an '''Image File''' are present, the image will be used as the video's poster image. This is the intended behavior but is not required.
 ** <u>If using an existing image already in the system</u>:
-**# Click '''''Insert an Image '''''button to launch the browser pop-up window.
+**# Click the '''Insert an Image''' button to launch the image browser.
-**# Navigate to the image under '''''Select Image''''', clicking on the radio button to the left of the thumbnail to select it.
+**# Navigate to the image under '''Select Image''', select it using the radio button, and click '''Select Image'''.
-**# Press the '''''Select Image''''' button in the bottom left.
 ** <u>If using a new image</u>:
-**# If you’re adding a new image to the system, click the '''''Insert an Image '''''button to launch the browser pop-up window button.
+**# Click the '''Insert an Image''' button to launch the image browser.
-**# Click '''''Upload Image '''''and then the '''''Browse…''''' button to browse your local system for the file, select it, and click the '''''Select Image '''''button.
+**# Click '''Upload Image''', then click '''Browse…''' to locate the image on your computer. Finally, click '''Select Image'''.
-* Add a '''''Video '''''URL. ''<u>Note</u>'': The system expects the video to come from '''YouTube''' or '''Vimeo'''
+* Add a '''Video URL'''.
-** Videos shared on the College web site should include '''closed captions:'''
+** ''Note:'' The system expects videos to come from '''YouTube''' or '''Vimeo'''.
+** Videos shared on the College website should include '''closed captions'''.
 *** [https://support.google.com/youtube/answer/2734796?hl=en Adding captions to a YouTube video]
 *** [https://help.vimeo.com/hc/en-us/articles/224968828-Captions-and-subtitles Adding captions to a Vimeo video]
 [[Category:Drupal]]
-<!-- Imported from Confluence page id=20513067 (https://swatkb.atlassian.net/wiki/spaces/DRUP/pages/20513067/Video-Only+Component) -->