Body
Issue/Question
How do I add a video to a Web CMS page?
Environment
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.
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.
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:
- 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.
If you need assistance, please contact the ITS Service Desk or submit a service request by clicking the Request Service button.