Embedding a Video in a Page

Embedding Kaltura videos requires an iFrame code. Please see the Kaltura Audio and Video Sharing guide with the eLC documents to learn how to get the iFrame Code. Once you get the iFrame code, you can paste it into the "Source" of your content. 


Complexity Level: Beginner

This is a beginner topic. Little to no advanced knowledge is required.

Permission Level

Overview

Drupal 10 comes with a really easy way to embed YouTube and Vimeo videos via a button on the text editor toolbar, as you'll see below. 

Embedding Kaltura videos or other media requires an iFrame code, which you get from logging into Kaltura. 

Table of Contents

Embed a YouTube or Vimeo Video

Step 1: Create a Piece of Content

Click the "Content" button in the top navigation bar.

Next click on the blue "Add Content" button:. 


Choose "Basic Page" from the list of content types.
Note: You can also use this feature on Articles, Events, Personnel, or any other content type that has the WYSIWYG controls. 


Step 2: Insert Media

You are now in the "edit" mode of an existing page, or in the "add" mode for a new page.
Click on the "Insert Media" icon:

Once you click on the "Insert Media" icon, an 'Add or Select media' screen will pop up.

Click on "Remote Video" since you are adding a video.

Open another browser window and navigate to your video in Youtube or Vimeo (these are the only two services that work using this feature). Copy and paste the URL from the address bar to get your video link.

Paste that link into the "Add Remote video via URL" field and click on "Add".

 


An "Add or select media" screen will pop up.
Click on "Save" 

Step 4: Insert Video

Once you have saved the video, an "Add or select media" screen will appear and you will see the video you just added. Note that it will have a blue checkbox in the upper left hand corner of the video.

Click on "Insert selected" to insert the video into the body of your page. 

Step 5: Save and View Your Page

The video will appear in the Body of your page:

Click on "Save" at the bottom of the page.

Now you can view your page with the embedded video:

Embed a Kaltura Video/Media

Step 1: Create a Piece of Content

This is the same as Step 1 from Embed a YouTube or Vimeo Video above. 

Step 2: Obtain the iFrame Code from Kaltura

Embedding Kaltura videos or other media requires an iFrame code from Kaltura. The iFrame code is found under the "Share" tab.

To get this iFrame code from the "Share" tab, you will need to log in with your UGA myID.

Part 1: Log into Kaltura

In a new tab or new browser window, go to kaltura.uga.edu and look for the "Guest" link in the top right hand corner.

Click "Guest" and then "Login."

Use your UGA myID to log in.

I'm now logged in. 

Part 2: Search for the Video/Media

Click the "Search" link in the top right hand corner of the screen.


In the example below, I searched for Unscripted, a podcast by Franklin College's Alan Flurry. 

Click enter.


I chose the media that's an interview with Franklin College Associate Dean Martin Kagel.

Part 3: Click the 'Share' Tab

Look for the Share tab that appears under the media. This will only appear if you are logged into Kaltura! 

Click "Share."

You now have several options for sharing Kaltura media. 

We need an iFrame code. Choose the "Embed" option to get the iFrame code.

Part 4: Change Video/Media Display Preferences if Desired

You may want the media to start or end at a specific time, or you may want a larger or smaller video to display.

In the example below, I changed the size of the media from 400x285 to 608x402.


Part 5: Copy the iFrame Code

Once your preferences are set, copy the iFrame source code. 

Now we need to go to back to our website.

Step 3: Paste the iFrame Code into the "Source" of the Page

Go back to your page on your Drupal site. 

In the text editor toolbar, click on the Source button.

You should see the html for your page.

Paste the iFrame embed code within your page, perhaps at the end of the html.

I pasted my code after my heading and text.

Save.

Step 4: View Your Page

You should see your video.

If you don't see your video, go to the address bar at the top of your browser.

Look at the "https://" part. Take out the "s" and hit enter.


For more info on embedding Kaltura media, lease see the Kaltura Audio and Video Sharing guide within the eLC documentation.



Login Assistance

To manage any part of your web site, you will have to be logged into the Drupal CMS.

If you need help logging in, please review this login help document. 


Contact the Franklin OIT Help Desk

Hours of Operation

Monday - Friday

8:00 a.m. - 5:00 p.m.

Website Information

Homepage & Directory

http://oit.franklin.uga.edu

Service Offerings

IT Services

Systems Status Information

Franklin OIT Status

http://status.franklin.uga.edu/

Receive or Discontinue Status and Service Updates from Franklin OIT

UGA/EITS Systems Status Pages

http://status.uga.edu

https://twitter.com/uga_eits

https://www.facebook.com/uga.eits

USG Systems Status Page

http://status.usg.edu