Working with Video
You can create video lessons with Doki as well as add video into lesson content directly so that it flows with the page. Doki recognizes many video links and can format the video embeds for you, so there's no need to get embed codes or configuration from your video hosting platform. Our system will automatically resize the video to fit the page (fluid video) and customize the video player to fit your brand colors if the video platform supports it.
In this guide
- Adding a Video Lesson
- Embedding Video in a Text-based Lesson
- Supported Platforms
- Vimeo Considerations
- Sprout Considerations
- JW Player Considerations
Adding a Video Lesson
From the Content section of your course, click the "Add Lesson" button under the Module you'd like to add a video lesson to:
From the modal window, select the Video lesson type:
Give the Lesson a title and paste the link to the video in the "Video URL" text field. If the Video URL is formatted correctly, a preview will appear underneath the text field:
Click the "Save" button to save your Lesson in an unpublished state. If you want to publish this lesson, click the check under "Status" next to "Lesson is published" and click "Save" to publish.
NOTE: This method works well with YouTube, Wistia, Vimeo and properly formatted Sprout videos. If you don't know how to properly format a Sprout video, you can use an embed code instead here: see the Sprout Considerations section for instructions. If you want to embed a video from the JW Player platform, see the JW Player Considerations section for instructions.
Embedding Video in a Text-based Lesson
To add a video inline in a text lesson, copy the
<iframe> embed code from your video provider and paste it into the lesson where you want it to go. The video should appear in the text editor.
You can also paste in links to YouTube, Vimeo, and Wistia videos into the content area. These will be recognized and converted to embed codes for you. At this time Sprout and JW Player links are not supported so you will have to paste the embed code yourself.
We currently support video lessons and embeds from:
- Sprout (see Sprout Considerations for specifics)
- JW Player (see JW Player Considerations for specifics)
Once you've found the video you want to embed or use as a lesson, copy the link to the video from the location bar in the brow Screencastser. Almost any link to the video should work; please contact support if you have a video link on a supported platform you want to use that does not work.
Here are some example links you can paste in the link field or in the lesson content that will automatically be turned into a video embed:
Vimeo's default embed code adds some fluid resizing logic that conflicts with Doki's resizing logic and display, so you'll want to remove that feature before you copy and paste your embed code.
- From the "Share the Video" screen, under "Embed" click "Show options".
- Under "Size", Select "Fixed Size".
- Uncheck the "Show text link underneath this video"
- If you want to get rid of all that text, uncheck "Portrait", "Title", and "Byline" under "Intro"
- No need to worry about color. Doki will automatically add your brand colors to match.
After you're finished, the Embed code should be "Doki ready". It should look something like this:
Sprout embed codes require a security key in embed which we cannot determine from any plain sprout video URL, so you will need to use one of the two following options to add a video lesson from Sprout.
1. Embed the video
Click the "add an embed code" link under the Video URL. This will switch you to a larger field where you can paste in the embed code from Sprout.
You can get the embed code by clicking "COPY EMBED CODE" on the video's page on the sproutvideo.com website:
2. (Advanced) Grab the Video URL from the embed code
You can paste in the URL from the In-line Embed embed code in the "Video URL" field for our system to recognize it as a Sprout Video URL. For example, if you "COPY EMBED CODE" from Sprout and the result is...
<iframe class='sproutvideo-player' src='//videos.sproutvideo.com/embed/489bdfb51511eecdc0/303fea10f7bea87e?playerTheme=dark&playerColor=1d85c2' width='630' height='630' frameborder='0' allowfullscreen></iframe>
The URL you'd want to paste in the Video URL field would be the value of "src", so:
JW Player Considerations
JW Player does not have a public link to videos embed codes, so you will need to use the two following options to add a video lesson from JW Player.
1. Embed the video
Click the "add an embed code" link under the Video URL. This will switch you to a larger field where you can paste in the embed code from JW Player.
2. Get the embed code
From the video detail page, click the "EMBED" button.
You should use a 16:9 responsive player (it will look and resize best at this size) and click the "IFRAME" tab. Click into the text area and copy that text:
Paste it into the "Video Embed Code" field in Doki.
When you save, you'll notice that the `<div>` tags and other content may be removed and just the iframe we use remains. This is normal.
You can now click "Preview" to view the video lesson embedded in your course content.
3. Embedding JW player into a text lesson or additional content field
Because JW player has its own responsive video resizing baked into their system, this conflicts with Doki's responsive video resizing we use for all other video plaforms. In order to embed a JW Player into a content field (for example, if you want to create a text lesson but use a JW Player video in the text area, follow the guide below.
First, you should follow the instructions for "2. Get the embed code" above. Once you have copied the embed code, in the content editor, click the "<>" icon to switch to HTML mode. Paste in the copied embed code into your content as HTML.
Finally, click the "<>" icon to switch back to text editing mode and click to save the lesson. This will properly format the player iframe and surrounding wrapper so responsive resizing will work correctly.