Enter a Youtube, Vimeo, or Panopto URL for a video, and the video player can be automatically added. Adobe Flash is not supported in this content type. The video content type can be positioned in any region of the page, including a Grid layout.
There are optional settings available, and some apply to specific types of video providers.
- Heading - This text is positioned above the video
- Description - Text will be displayed below the video
- Hide title overlay - Removes the default video title overlay provided by (Vimeo only)
- Hide byline overlay - Removes the video publisher byline overlay (Vimeo only)
- Autoplay video - Youtube only, the default setting does not autoplay. Autoplay is controlled by the web browser, so enabling that setting in the content type won't guarantee that the video starts playing automatically.
- Loop video replay - Youtube only, by default the video plays once
- Playlist ID - Youtube only, the Playlist ID is required for looping a video
Examples
The first example includes a YouTube video. The custom settings include heading and description text, and the Loop option is checked.
We're on our way, Broncos!
Setting the video to loop will require supplying the video ID in the Playlist ID field.
Vimeo example
Using a Vimeo URL, with the title and byline set to be hidden.
Panopto videos can be displayed with their own framed user interface, including search and navigation controls, or display the video only as in the example that follows. To switch from the framed video to video only you'll need to modify the URL entered in the content type.
The "framed" Panopto video URL looks like this:
https://santaclarauniversity.hosted.panopto.com/Panopto/Pages/Viewer.aspx?id=[video id]
For the "video only" display, change the "Viewer.aspx" part of the URL to "embed.aspx".
https://santaclarauniversity.hosted.panopto.com/Panopto/Pages/embed.aspx?id=[video id]
Panopto Video
This is an example of an embedded Panopto video.
Embed iFrame Video Responsively
If embedding an iframe, without using the video content type, we recommend using the following code:
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="..."></iframe>
</div>