Embedding a Video in Web CMS

embed OUCampus video YouTube mp4 embedding webpage page site website OmniCMS campus cms modern ModernCampusCMS webcms

Issue/Question

How do I add a video to a Web CMS page?

Environment

Web CMS

Resolution

To maximize compatibility with all devices and maintain accessibility standards, WKU ITS strongly recommends adding video to YouTube and then embed your video into WYSIWYG Editor using the YouTube Embed Component or YouTube Modal Component.

Embedding a YouTube Video

Edit page in which you wish to embed video code.
Click Edit Content Area.
While editing an editable region, click Insert Component in WYSIWYG editor toolbar.
In Choose Component box, click YouTube Embed or YouTube Modal.
Click Insert.
In Edit Component dialog add the following:
1. YouTube URL: full URL of video to be embedded
  - Ex: https://www.youtube.com/watch?v=-FdwTsYsFQw
2. Video Title: The title of your video, used for accessibility purposes.
3. Optionally, select a Custom Cover Image instead of the one provided by YouTube.
Click Save in Edit Component dialog
Save page.
Publish to make page go live.

Embedding Videos with an HTML Embed Code

Warning! Use of third party embedded content is at your own risk. WKU ITS cannot guarantee accessibility or compatibility of this type of content. To ensure your video is fully accessible and optimized, please use YouTube for hosting with the YouTube Embed Component or YouTube Modal Component.

Edit page in which you wish to embed video code.
Click Edit Content Area.
Click Insert/Edit Media button in WYSIWYG toolbar.
In Insert/Edit Media dialog click Embed tab.
Copy the HTML embed code for the video from video hosting site.
Paste the HTML embed code in field labelled Paste your embed code below.
Click Save in Insert/Edit Media dialog.
Save page.
Publish to make page go live.

Embedding a .mp4 Video

Warning! Embedding .mp4 videos on a page cannot be made fully accessible with captions through WYSIWYG editor and should be used at your own risk. WKU ITS cannot guarantee accessibility or compatibility of this type of content. To ensure your video is fully accessible and optimized, please use YouTube for hosting with the YouTube Embed Component or YouTube Modal Component. There is a 50mb file size limit in the CMS. Larger videos cannot be hosted on WKU website and should be added to YouTube instead.

Edit page in which you wish to embed video code.
Click Edit Content Area.
Click Insert/Edit Media button in WYSIWYG toolbar.
In Insert/Edit Media dialog make sure you are on General tab.
Next to Source field, click on Explore button and navigate to your video file.
Note: The .mp4 will have to have been uploaded to CMS and published.
Click Insert after selecting video file.
Set the Width and Height to the following to ensure your video responds to width of the window:
- Width: 100%
- Height: auto
Optionally, if you have an image you would like to use as a placeholder before video starts, add it as the Media Poster.
1. Change to Advanced tab.
2. Next to Media Poster field, click Explore button and navigate to your cover image file.
3. Click Insert after selecting image.
Click Save in Insert/Edit Media dialog.
Save page.
Publish to make page go live.

If you need assistance, please contact the ITS Service Desk or submit a service request by clicking the Request Service button.

100% helpful - 1 review

Request Service Print Article

Updating...

Embedding a Video in Web CMS

Issue/Question

Environment

Resolution

Embedding a YouTube Video

Related Articles (2)

Related Services / Offerings (1)

Deleting...