# Video Preview for Single Course

The **Video Preview for Single Course** feature allows instructors to add a video preview to the course page. This enhancement provides potential students with a visual and engaging introduction to the course content, increasing their likelihood of enrolling.

<figure><img src="https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FbriNhmw4t0Ei0Ahd0O5P%2Fimage.png?alt=media&#x26;token=14243097-3356-4d44-8bb2-b7e3cc069bf4" alt=""><figcaption><p>Video Preview on the Single Course Page</p></figcaption></figure>

## **Importance and Benefits**

Adding a video preview to your course page offers several benefits:

* **Increased Engagement**: Videos can capture the attention of potential students more effectively than text alone.
* **Better Understanding**: A video preview gives a clear and concise course overview, helping students understand what they can expect.
* **Enhanced Credibility**: High-quality video previews can improve the perceived professionalism and credibility of the course.

## **How to Add a Video Preview**

To add a video preview to your course, follow these steps:

1. Edit the Course that you want to add Video Preview using **Course Builder**. You can do it in two ways:

* Click on the Edit with Course Builder button **on the Single Course page** of the course that you want to add a video preview:

<figure><img src="https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FfeyTVnl4jhG7AepJndlI%2Fimage.png?alt=media&#x26;token=929928a8-6654-4dfa-a40e-c7da841c5dd9" alt=""><figcaption><p>Editing the course with  Course Builder via Course Page</p></figcaption></figure>

* Using the Courses section in the WordPress Dashboard:

<figure><img src="https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2F6jV6bcUUDhpyrKyA0jxW%2Fimage.png?alt=media&#x26;token=85aaf650-3a7b-491c-b7fc-765ec310524a" alt=""><figcaption><p>Editing the course with Course Builder via WP Dashboard</p></figcaption></figure>

2. Navigate to **Settings ->Main -> Source type for video preview:**

<figure><img src="https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FoksLDpGcCXbnBYxXBuQT%2Fimage.png?alt=media&#x26;token=fc8e9854-7891-4d55-8197-76b9efdd88a5" alt=""><figcaption><p>Source type for video preview settings</p></figcaption></figure>

3. **Select Video Source**: Indicate the type of video you want to use for the preview. The available video sources are:

* [**HTML (MP4)**](#html-mp4)
* [**Embed**](#embed)
* [**YouTube**](#youtube)
* [**Vimeo**](#vimeo)
* [**External Link**](#external-link)

{% hint style="warning" %}
Make sure to check [Preferred Video Sources](https://docs.stylemixthemes.com/masterstudy-lms/how-to-add-video-to-the-lesson#preferred-video-source) in the plugin settings to get these options.
{% endhint %}

***

### HTML (MP4)

**The HTML (MP4)** option allows you to upload a high-quality MP4 video file directly to the course page. Additionally, you can enhance the visual appeal of the video by uploading an **image poster**, which will be displayed before the video starts playing. This option is ideal for providing a professional and seamless video preview experience to potential students.

<figure><img src="https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FqNjJOOXS8TkJhl8edeKu%2Fimage.png?alt=media&#x26;token=82e17e72-2285-49d6-a2a8-06c2016a897a" alt=""><figcaption><p>HTML (MP4) option</p></figcaption></figure>

* **Poster for a video preview** -use dragging & dropping to add an image poster to the video or just click on the upload button.
* **Video Preview** - as a poster image you can use the drag & drop method or just use the special button to upload your video in **.MP4** format.

{% tabs %}
{% tab title="On the Settings" %}

<figure><img src="https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FAlA7Rp1Zjbap6vULKuYA%2Fimage.png?alt=media&#x26;token=13dc5e3b-3fb1-4e6f-a391-fbd89ac74735" alt=""><figcaption></figcaption></figure>
{% endtab %}

{% tab title="On the Course Page" %}

<figure><img src="https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2F0cPSPlvSbzJszRbGVjl7%2Fimage.png?alt=media&#x26;token=3ac008e7-f915-4b1a-8733-70cda3cdd857" alt=""><figcaption><p>Image Poster </p></figcaption></figure>

<figure><img src="https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2Fh12g9b3fMwzVmp5uDLCE%2Fimage.png?alt=media&#x26;token=f468e905-92d4-4926-bc7c-e248eb3b8645" alt=""><figcaption><p>Screenshot of playing video</p></figcaption></figure>
{% endtab %}
{% endtabs %}

{% hint style="info" %}
**Please note:** The loading speed can be **decreased** after video upload depending on server limits, and if the video doesn't upload it is required to check server parameters.
{% endhint %}

{% hint style="success" %}
**We recommend using CDN to improve the site speed and performance if uploading large video files is planned.** It will be better if large files are uploaded on external video hostings like [**YouTube**](#youtube) or [**Vimeo**](#vimeo) to save limits on the hosting side.
{% endhint %}

### YouTube

The YouTube option allows you to easily add a video preview to your course page by entering the YouTube video URL. This method leverages YouTube's robust hosting and streaming capabilities, ensuring a high-quality viewing experience. By using the YouTube option, you can provide potential students with an engaging and accessible video preview, showcasing your course content effectively.

<figure><img src="https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FU1NIMZyefoXUFniUs3FM%2Fimage.png?alt=media&#x26;token=16f99e5c-d37c-4a4f-b6ba-441a08efa46a" alt=""><figcaption><p>Settings four YouTube Video Preview</p></figcaption></figure>

To get a proper YouTube Video URL:

1. Click on the **Share Button** in YouTube Video:

<figure><img src="https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FRXcBpwkwCod7VL9KwVXc%2Fimage.png?alt=media&#x26;token=793f3108-4e18-4009-acc6-97064f3aa69d" alt=""><figcaption><p>YouTube Video</p></figcaption></figure>

2. Copy the URL and paste it to the designated area in the Course Builder:

<figure><img src="https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FxcnxOntfCmVVnydBLjEq%2Fimage.png?alt=media&#x26;token=0ff9c243-e609-493f-8f21-33d7fc746bff" alt=""><figcaption><p>YouTube Video URL</p></figcaption></figure>

### Vimeo

Integrate a Vimeo video preview into your course page by entering the Vimeo video URL. This uses Vimeo's high-quality hosting for an excellent viewing experience. Provide potential students with an engaging and professional preview of your course content.

<figure><img src="https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2Ft9DVAxRfionsd9kDXHHA%2Fimage.png?alt=media&#x26;token=59b23cb9-cec3-4bcd-be9b-c382adef6413" alt=""><figcaption><p>Vimeo as a prefered video source</p></figcaption></figure>

Choose Vimeo as a source type and paste the video URL.

<figure><img src="https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FPiuYK3395v9V8s1NGcfM%2Fimage.png?alt=media&#x26;token=e59408ff-75e1-4dc7-aa46-22a3b60bafe1" alt=""><figcaption><p>Vimeo as a Source</p></figcaption></figure>

### External Link

The External Link option allows you to add a video preview to your course page by providing the URL of a video hosted on an external platform. Additionally, you can upload an image poster to display before the video starts playing. This option is ideal for using videos hosted on your own servers or other video platforms, offering flexibility and a professional preview experience for potential students.

<figure><img src="https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2F8i2RJXEB42uXUUueyuDw%2Fimage.png?alt=media&#x26;token=ed57829a-0815-4a6e-a18a-eae14b3d014a" alt=""><figcaption><p>External Link as a Source</p></figcaption></figure>

You can also add a poster image for video preview as [HTML (MP4)](#html-mp4) option.

{% hint style="warning" %}
The direct URL of the video that ends with **an extension of the file**: <https://site-name.domain/videos/sample><mark style="color:red;">.mp4</mark>
{% endhint %}

### Embed

**The Embed** option allows you to include a video from an external source by pasting the embed code provided by the video hosting service. This method supports various platforms and enables seamless integration of your video content into the course page. The Embed option is perfect for utilizing videos hosted on platforms like Dailymotion, Brightcove, or Wistia, ensuring a smooth and professional video preview experience for potential students.

<figure><img src="https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FH285qaBv2M4kD09PSGAB%2Fimage.png?alt=media&#x26;token=d5e5c32a-47cc-4e0e-ae08-11f567bf5841" alt=""><figcaption><p>Embed Code Settings</p></figcaption></figure>

Just enter the embed code in the designated area.

<figure><img src="https://691205473-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-MDTL6WUldKvxQaP8jzz%2Fuploads%2FCV35a0P0pOEeXdDqPJZb%2Fimage.png?alt=media&#x26;token=2caa7dc6-b4d5-46de-8cc4-28f995ab1e1f" alt=""><figcaption></figcaption></figure>

Here is an example of the correct embed iframe code:

{% code overflow="wrap" lineNumbers="true" %}

```html
<iframe allowtransparency="true" title="Wistia video player" allowFullscreen frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" src="https://fast.wistia.net/embed/iframe/1w9z4zg847" width="400" height="225"></iframe>
```

{% endcode %}

## **Tips**

* Ensure your video preview is engaging and relevant to the course content.
* Use high-quality images for video posters to create a professional look.

By following these steps, you can enhance your course page with a compelling video preview, making your course more attractive to potential students.