Add video and audio to your web pages with the [jgupanopto] and [jguvideo] shortcodes.
Streaming Media is a technology that makes multimedia data (e.g. audio and video data) available on websites for direct retrieval. This avoids having to download usually large multimedia files.
In addition to these special JGU shortcodes, you can use the standard WordPress [video] shortcode to include videos uploaded to your projects Media-Manager. You can find more information regarding this shortcode in the WordPress video shortcode documentation.
Attention: Best practice is to include the Panopto Videos. This service is brought to you by the Rineland-Palatinate Government and the JGU University. There are no legal complications due to external cloud services. All data remain on our local platform
The Centre for Data Processing (ZDV) operates its own video platform, which is available free of charge to all universities in Rhineland-Palatinate. Panopto is a web-based application for video publishing, providing, and comes with elementary video cutting functionality. With the Panopto recorder, you can use your computer to record webcasts, or for live streams. Content recorded in this way can be integrated into WordPress in various ways.
Integrate Panopto videos via shortcode
Finding the video's Panopto-ID
To include a Panopto video via shortcode, you need the Panopto ID of the video. You can find it like this:
Open the desired video via Panopto and copy the corresponding Panopto video URL. It looks like this, for example:
The Panopto ID in this example is:
Use the shortcode
[jgupanopto] to include Panopto videos with a player into your WordPress website.
Copy the following example into your website and replace
replace_with_panopto_id with the Panopto ID of your video:
Customize shortcode with parameters
You can use the following parameters to customize the behaviour of the shortcode:
Function: URL of the Panopto server Panopto-Servers (usually not needed)
[jgupanopto panopto_host="video.hs-mainz.de"]- hiermit könnten Sie Videos des Panopto-Servers der Hochschule Mainz einbinden
Function: set maximal width of the video (value in pixels)
Function: Verhältnis Breite zu Höhe für die Darstellung des Video-Fensters
Possible values: 16x9 (Standard), 4x3
When embedding access-protected videos, problems and error messages can occur when the video is integrated via shortcode.
Link to Panopto videos
In some cases a Link to a Panopto Video is the better solution than using the shortcode! If in your Video you ...
- Make use of the chapter markers,
- Show comments,
- Use the jump labels,
- Restrict the access to the Video,
you should offer the video as a link to the Panopto interface.
Copy the Panopto video URL and paste it as a link to a text or image.
Integrate Panopto Videos via Podcast-URL
Panopto provides different URLs for your videos, which you can get from Panopto's user interface if you have the rights for the respective video. You can then insert this Panopto video podcast URL into the visual editor of WordPress to display the WordPress video player without having to use the shortcode (however, the additional parameters of the shortcode are not available to you then!)
You can display this URL in Panopto as a logged-in user under "Settings" -> "Outputs" -> "Show Podcast".
Such a URL looks like this:
Remove the query string from the URL
?mediaTargetType=videoPodcast and insert the URL into the WordPress editor. After saving the page, the Video will be shown instead of the URL both in the editor and on the frontend for the user.
Integrate Panopto audio files via shortcode
You can also use Panopto Sie stream audio files. To do so, use the
[jgupanopto] with the parameter
[jgupanopto audio="on" panopto_id="f1029ced-4f56-4638-9dd0-047f27a92fb9"]
Customize shortcode with parameters
You can use the following parameters to customize the behavior of the shortcode:
Function: shows audio player with 100% width
Standard: small player (300px width)
Function: start audio when page is loaded
Standard: auto-play off
Note: from an accessibility point of view, avoid using this parameter and let visitors decide to start the audio output themselves.
More information about Panopto
You can find more information about Panoto under the following links:
- website about E-Learning at JGU (particularly integreating video in WordPress)
- website about Digital learning at JGU
Integrate YouTube videos
YouTube videos are inserted simply via the URL of the YouTube video as a value for the url parameter:
Customize shortcode using parameters
Der Shortcode kann über die folgenden Parameter angepasst werden:
Function: modify width and height of the video in pixels
[jguvideo w="300" h="200" ]
Function: preview image (optional)
[jguvideo url="http://www.youtube.com/watch?v=id-des-youtube-videos" w="123" h="123" image="http://www.pfad-zur-bild/datei.jpg"]
Make sure that video and image have the same aspect ratio. The image parameter requires the full URL to the image.
For example, add the image via "Add files - upload". You will then see the image checked in the media preview. On the right side of "File Attachment / Display Setting" you will find the address of the image, which you copy to the clipboard with CTRL-C. Then uncheck the image and close the "Add files" window. Now add the image parameter image="Address from cache strg-v", e.g.
[jguvideo url="http://www.youtube.com/watch?v=9KkHur8NMJM" image="//www.blogs.uni-mainz.de/wp-content/uploads/2012/03/startbild.gif"]
Integrate a video from Seafile
Upload the video to Seafile. Share it. You will get a link that you can use to integrate the video into the WordPress site.
Link to a video via text link
You have uploaded a small and short video directly to WordPress and you don't want a preview image, but really only a text link. Only after you click on the text link, a window opens with the video and the video starts.
Example for Video with text link: → Example of video linked to text
- Click on the video in the media manager.
- Copy the video link to the clipboard
- Go to the page where you want to include the link.
- Add the video link to the text.