Topics Map > Sakai > Sakai 12 Help > Rich-Text Editor (CKEditor)

Sakai 12 - Rich-Text Editor (CKEditor): How do I embed non-YouTube videos in the text box?


How do I embed non-YouTube videos in the text box?

For videos that are not hosted on YouTube, you can use the Video Player feature of the Rich-Text Editor to playback playback MP4, WebM, and Ogv files uploaded to the Resources tool in your site. Because Sakai is not designed to be a streaming video service, we recommend first considering the use of a dedicated video streaming service like YouTube to host and playback video content. For video streaming services other than YouTube (e.g., Vimeo), you might consider the tip listed below for linking an image to a video streaming service. See also these Quick Tips for Handling Video in Sakai.

NOTE: If using the Lessons tool in your Sakai site, you can also use the 'Embed Content on Page' function in Lessons to embed videos.

Place cursor in textbox, and click Video Player.

Place the cursor in the textbox where you want to embed the video player. Typically this is within a new paragraph block. Then, click the Video Player button. This will popup a dialog box.

Click Browse Server.

Click Browse Server

Click Browser Server. This opens the Resources Browser popup window.

Select the video file.

In the large central panel, double click the Resources folder to navigate through the folders contained in the Resources tool to locate and select the video file for which you want to embed a video player.

If you haven't yet uploaded the video file you want to Resources, you can do so by first clicking the upload button as depicted below. However, you might want to first navigate to the folder in which you want to store the file before clicking this upload button.

Then you can drag and drop the video file you want into the dotted area of the popup that is depicted below. Or you can click Select File to select the file to upload to Resources.

Finally, select the filename for the video file you have uploaded, and click OK.

Enter height or width and click OK.

Enter height or width and click OK

After selecting your video file, the URL for it in Sakai is displayed in the URL text field of the Video Player dialog. Optionally enter a value either for the Width or the Height of the video player and click OK. This will display an HTML5 video player, the look and feel of which varies across web browsers.

NOTE: If you need to edit the video content you've embedded, right click on the video player in the rich-text editor and select Video Properties.

Tip: Link an Image to a Video Streaming Service

You can link to videos stored on a streaming services other than YouTube (e.g., Vimeo) by using a simple hyperlink like the following example: What is Literature for?. However, if your video is a crucial element, use an image to serve as a hyperlink to establish greater visual prominence for the video content.

Assuming you know how to take a screenshot and crop images, you can use a cropped snapshot (image) of the video player (e.g., on Vimeo, etc.) that you would otherwise want to embed. You would instead embed the image in the rich-text editor. Then link the embedded image to the video player's URL (e.g., on Vimeo, etc.)

The clickable image below demonstrates the end result of applying this method.

A thumbnail of a Vimeo video

Click on the image above to watch the video.

Note: This method will only work for online video streaming services like Vimeo but not videos stored in Sakai.

Keywords:vimeo, youtube, mp4, mov, movie   Doc ID:90439
Owner:Sean H.Group:Pacific Lutheran University
Created:2019-03-18 16:53 PDTUpdated:2021-02-02 11:41 PDT
Sites:Pacific Lutheran University
Feedback:  0   0