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

Sakai 21 - 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?

Important: Before uploading video files to Sakai, please review these Quick Tips for Handling Videos in Sakai

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

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 the Browser Server button associated with the input field labeled, Allowed file extensions: MP4, WebM, Ogv. This will open 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.

Check 'Show controls', and enter height or width. 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. Check the Show controls checkbox so that the video player controls will display, making it more obvious that it's a video instead of just an image. 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.



Keywordsvimeo, youtube, mp4, mov, movie   Doc ID115916
OwnerSean H.GroupPacific Lutheran Univ
Created2022-01-12 17:08:44Updated2023-10-09 14:26:40
SitesPacific Lutheran University
Feedback  0   0