EDT4OL/Authoring/Embed video

From WikiEducator
Jump to: navigation, search
Video Camera & Microphone.jpg

Icon key points line.svg
Video requirements for the authoring challenge

You are required to incorporate at least one video resource in your learning pathway to provide evidence of your skills in using wiki markup to embed video for playback on the course website on WordPress. You can choose one of the following options:

  • Embed an educational video relating to your content that you sourced on YouTube or Vimeo during the OER inventory mini-challenge
  • Record a short introduction to your learning pathway using a mobile phone or webcam
  • Produce an audiographic slideshow saved in video format (Consult the DS4OERS learning challenge on creating a static audiographic for more information.)



Technical and ethical considerations

The WikiEducator community does not support advertising in the wiki. While there are many valuable educational videos hosted on YouTube, there is no mechanism to restrict the playback of advertisements within videos when embedding from third party websites. Moreover, YouTube videos which are not licensed under a CC-BY licence use the 'Standard YouTube licence' which is technically an 'all rights reserved' licence and therefor not 'OER'. While it is legal to link to YouTube videos, when embedding there are additional terms of service which require the use of a proprietary YouTube player, which is problematic for some Free and Open Source Software (FOSS) communities like WikiEducator. For these reasons, WikiEducator does not support embedded playback of YouTube videos within the wiki itself.

However, WikiEducator has developed templates which will enable you to embed YouTube videos on your published WordPress course site. In this way, we leave the decision about the appropriateness of YouTube advertisements contained within videos to the individual course authors without transgressing the WikiEducator community values. Note that it is not illegal to embed YouTube videos on the WordPress course site, because the official player is used for playback - however, YouTube will be tracking data about viewing behaviour.

In the case of Vimeo, playback of openly licensed videos is permitted in WikiEducator as advertising is not embedded within Vimeo videos; however, to upload a video to Vimeo you require a paid subscription service which may not be accessible to students on this course.

Both wiki templates for embedding videos on the WordPress site are "responsive", which means that the videos will automatically resize for mobile phones to fit the playback screen.

What wiki markup template should I use?

We provide two options below for embedding video on the course site snapshot

  1. YouTube
  2. Vimeo

For the purposes of this course, the option you choose is determined by the site where the video you want to incorporate is hosted. If you are planning to use your own recorded video, YouTube will provide you with a hosting solution unless your organisation has a paid Vimeo subscription.

YouTube embed template

The following wiki markup will embed a responsive YouTube video within a 'Media' pedagogical template on the published course website on WordPress. In the wiki, it will display as a placeholder image without playback options, so you will need to request a snapshot for your outline page to see how playback works on the course site.

{{IDevice
|theme=line
|type=Media
|title=
|body=
Some text to introduce the video goes here.
{{YouTube
|id=
|title=Title of video goes here
|align=left
|width=560
|height=315
}}
}}

Notes

The template parameters are explained below:

  1. title (First option): Change the display title of the Media pedagogical template here.
  2. body: Edit the text as appropriate to introduce the video or provide instructions for the activity.
  3. YouTube id: This is a case sensitive code displayed after the 'watch?v=' parameter in the URL of a YouTube video, or alternatively you click the "Share" --> Embed option displayed below a YouTube video to reveal the ID number which is displayed after the https://www.youtube.com/embed URL contained in the embed code. (Note that "YouTube" is also case sensitive in this template, so ensure that you capitalise the Y and the T.)
  4. title (Second option within YouTube template): This is the title of the video that displays within the YouTube embedded video before playback begins.
  5. align: We recommend leaving this set to "Left" because, as author, you do not know what the size of the playback device the learner will be using.
  6. width: Is the display width specified in pixels. If you decide to change the display width, you should alter the height parameter in the same ratio. Remember that the video will auto-resize for playback on small audio devices, so we recommend leaving this parameter unchanged.
  7. height: Is the display height specified in pixels. If you change the display height, you should alter the width parameter in the same ratio. Remember that the video will auto-resize for playback on small audio devices, so we recommend leaving this parameter unchanged.

Vimeo embed template

The following wiki markup will embed a responsive Vimeo video within a 'Media' pedagogical template on the published course website on WordPress. In the wiki, it will display embedded with playback options. Requesting a snapshot for your outline page will show how playback works on the course site for your embedded video.

{{IDevice
|theme=line
|type=Media
|title=
|body=
Some text to introduce the video goes here. 
{{VimeoResponsive
|id=
|align=left
|width=560
|height=315
}}
}}

Notes

The template parameters are explained below:

  1. title: Change the display title of the Media pedagogical template here.
  2. body: Edit the text as appropriate to introduce the video or provide instructions for the activity.
  3. Vimeo id: This is a case sensitive number displayed after the https://vimeo.com/ URL of the video hosted on Vimeo.
  4. align: We recommend leaving this set to "Left" because as author, you do not know what the size of the playback device the learner will be using.
  5. width: Is the display width specified in pixels. If you decide to change the display width, you should alter the height parameter in the same ratio. Remember that the video will auto-resize for playback on small audio devices, so we recommend leaving this parameter unchanged.
  6. height: Is the display height specified in pixels. If you change the display height, you should alter the width parameter in the same ratio. Remember that the video will auto-resize for playback on small audio devices, so we recommend leaving this parameter unchanged.
Icon activity line.svg
Activity

Use wiki markup to embed video on a published course site on WordPress

  1. Identify the unique video ID number: Go to the Vimeo or YouTube playback page for the individual video you will be embedding.
    • For YouTube: Click on the 'Share' link below the video, and identify the video ID, which is the case sensitive code that appears after the last forward slash in the share URL. For example, the video ID of this share link: https://youtu.be/F4q3CjOQARI is F4q3CjOQARI. Note that this ID is case sensitive meaning that capital and lower case characters must be identical when copying the ID.
    • For Vimeo: Click on the 'Share' button displayed below the video. The video ID will be the numbers shown after the base playback URL. For example, the video ID of this share link: https://vimeo.com/698836320 is 698836320.
  2. Use wiki template markup for embedding video on a WordPress course site:
    • Go to the sub-page linked from your course outline page in the wiki where you plan to insert the video, and open this in edit view.
    • Copy and paste the appropriate wiki template text above into the sub-page where you will insert the video.
  3. Complete the missing parameters of the wiki video embed template
    • Use the notes detailed above for each template to complete the parameters by:
      • adding the video ID
      • Changing the title of the Media template if appropriate
      • Adding instructions for viewing the video as the 'body' text parameter, for example tips for viewing the video or questions you would like to pose for learners to answer before watching the video.
      • For most video applications, you don't need to change the width and height parameters. The templates for embedding video are responsive meaning that they will auto-resize for small displays. However, if you change the width parameter, you must change the height parameter in the same ratio or the video aspect ratio will be distorted.
  4. Request a snapshot of your 'Outline' page
    • Log in to WikiEducator or check that your wiki session is current.
    • Remember to use your WordPress username and password
    • Wait a few minutes for the snapshot script to complete the conversion of wiki pages for WordPress.
    • If you have done this correctly, the video you selected should be embedded for playback on the corresponding sub-page on your WordPress course site.



Icon discussion line.svg
Need help?

If you need help or support for authoring in the wiki and/or publishing to your WordPress course site, post your questions in the Support forum.

  • Please summarize the problem you are trying to resolve.
  • Please include the following URLs when requesting help:
    • The relevant wiki sub-page
    • Your wiki ‘Outline page’
    • Your WordPress course site

By providing the URLs, your facilitator will be able to identify markup errors and where appropriate, fix any syntax errors directly in the wiki.