Stephens Hall
Stephens Hall is one of the original buildings on the Towson University campus and serves as a venue for music and theatre performances
Adding Video
This guidance on how to add video to news article pages is for newsroom editors only.
About Video Captioning
All videos added to the TU website must be captioned. If you have questions about video accessibility and captioning, contact Henry Basta, hbasta AT_TOWSON.
How to Add Video to Snippets and Components
Copy the Video Embed Code
The first step to adding a video to a snippet or component is copying the embed code from the video. The most common types of videos added to news articles will be YouTube or Vimeo videos.
To copy a video embed code first go to the YouTube page hosting the video and click the share button below the video. Doing this will open a modal window with sharing options.
After the share pop-up window opens you will see a number of different ways to share your video. Click “Embed.” The “Embed Video” modal window will open.
Within the embed video pop-up window you will see a piece of embed code. Placing your cursor within the code will highlight the entire embed code. Click “Copy” in the bottom right corner.
Once you have the code copied, paste it into Notepad (on a PC) or Notes (on a Mac). You won’t need the entire code. Instead you will just highlight and copy the source URL. You will use this URL to paste into a snippet or component. An example of the source URL is highlighted below:
- <iframe width="560" height="315" src="https://www.youtube.com/embed/OgaXv1SI-lY" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
Add a Video Component
Here's an example of a video embedded in the page:
Follow these instructions to embed a video using the “Video Component.” Working within “Edit” mode of Modern Campus CMS, go the top toolbar and select the “Component” icon (looks like an image of an atom). This will open the “Choose Component” window. Select the “Video” component and click “Insert.”
Enter the embed video URL into the video source field and the title of the video into the video description field. Add the code “?rel=0” to the end of the URL.Click Save.
Add a Video to a Snippet
Add an “In-Content Carousel Block Callout” by selecting it from the “Insert Snippet” icon in the top toolbar. The “In-Content Carousel Block Callout” will now be added to the page.
University Union
The University Union is the hub of co-curricular activities and programs for the campus, as well as home to a multitude of student services.
Add images to the carousel by right clicking in the “Image” row and selecting “Insert/Edit Image.” Images selected for this snippet must be cropped as an “–sq.” Remember to add a description to the image for accessibility purposes. NOTE: You need at least two images to use this component.
Add appropriate content for the “Title” and “Text Caption” rows.
Next you will need to copy the video embed code from the YouTube video you wish to feature.
To add the link, highlight “Continue Reading” and click on “Insert/Edit Link” in the
top toolbar. Paste the embed URL link into the URL field. NOTE: You will want to change
the link text to “Watch the Video” and add the code “?rel=0” to the end of the URL.
Doing this ensures that related video content will not show up after the video has
played. Click Ok and then click Save.
The video play button will now appear over the image you have selected. Test the video
to make sure it functions by clicking the link while you are previewing the page.
Add a Video to a Featured News Article
Featured news articles have a large top image ( cropped at 1440 x 650 pixels) with the image crop of “xl” added to the file name (i.e., stephens-hall-xl.jpg). These images are updated in the multiedit interface. For more information about how to update the top image for a featured news article see Adding Images.
To add a video to a large top image space, do the following:
- After logging into Modern Campus CMS, click the multiedit button in the upper right corner of the page to access the multiedit interface.
- Under the header labeled “Full Width Hero,” you will see fields for adding overlay “Hero Text,” a call-to-action “Hero Button,” a link and an optional video embed. Note: If you add a text overlay the image will be shaded.
- To add a video embed, paste the video embed code (see above “Copy the Video Embed Code”) into the “Hero Video.”
- Click “Save” and then publish your updated webpage.
- Check the published page to test that the video plays.