Updating...
Skip to main content
Filter your search by category. Current category:
All
All
Knowledge Base
Service Catalog
Search the client portal
Search
Sign In
Show Applications Menu
ITS Client Portal
Sign In
Search
Home
Projects
Services
Knowledge Base
More Applications
Skip to Knowledge Base content
Search
Articles
Blank
Knowledge Base
WKU Systems
Modern Campus CMS
WYSIWYG (Text Editor)
Embedding a Video
Embedding a Video
Tags
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:
YouTube URL:
full URL of video to be embedded
Ex: https://www.youtube.com/watch?v=-FdwTsYsFQw
Video Title:
The title of your video, used for accessibility purposes.
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
.
Change to
Advanced
tab.
Next to
Media Poster
field, click
Explore
button and navigate to your cover image file.
Click
Insert
after selecting image.
Click
Save
in
Insert/Edit Media
dialog.
Save
page.
Publish
to make page go live.
Sign in to leave feedback
100% helpful - 1 review
Blank
Blank
Blank
Blank
Print Article
Related Articles (2)
Adding a New Snippet
Instructions on how to add any of the available Snippets to Web CMS: accordions, alerts, cards, columns, countdowns, lists, maps, modals, social media, tabs, timeline, YouTube.
Adding MP3 Files to WKU Websites
Instructions for adding an MP3 to a WKU site through Web CMS.
Deleting...