Embedding and Adding Video

  • Adding Video
    There are two options available for streaming video from your site. The one you choose is dependent on your audience. If your audience is the public including parents, students, and community you will want to use YouTube as your streaming video provider. If you need your video to stay in-house and only be viewed by WCSD employees you will want to use O365 Video as your streaming provider.
     
    These instructions cover uploading your video to a video service, they do not cover the creation of a video.
     
    YouTube

    Create an Account
    If your department or school site does not have an account with YouTube you will want to create one. It is important that you do not use your personal email address in the account. Eventually this will require you to hand over your password to another employee. You will want to use your departments general email account usually in the hands of the administrative assistant or secretary. (ex. communications@washoeschools.net or gomm@washoeschools.net)
     
    Upload Your Video
    (Important: Instructions were created using the Internet Explorer browser)
    Navigate to YouTube.
    Sign in. (Using your sites general email) or create an account (see above)
    My Channel from the left navigation In the left hand navigation click on the "My Channel" link. At this point you may have to create a username/channel if one has not been create yet. Give the channel/username a generic name based on your department or school. (ex Communications or Gomm)
    From here you can click the " upload a video" link near the middle of the page or click the upload link in the top right corner of the page.
    On the upload page you will want to choose unlisted from the privacy drop down. This will allow you to share the video with anyone that clicks on the link but will keep it from being searched in YouTube.
    Click on the large up arrow icon above the words "Select file to upload".
    Navigate to your video, select it and click open. The video can take some time to upload and process. During this time make sure the title, description are filled out.
    Click the publish/done button in the top right corner when you are sure everything is correct.
    You will be given a link to the video in the next screen but the link will not work due to the district internet filter. You will learn how to add the video to your page below in the "Adding Video to Your Page" section.
    Click on the video manager button at the bottom right and continue to the "Adding Closed Captions/Subtitles".
     
    Adding Closed Captions/Subtitles
    Required for ADA Compliance
    Closed captions and or subtitles are required for every video displayed on the district website. For videos that have already been created you are required to provide upon request a transcript of the video.
    Click here for more information.

     
    Youtube video manager link Click on the Video Manager link (located above the channel banner).
    Click on the black down arrow beside edit button beside the thumbnail image of the video you need to add subtitles/closed captioning to.
    Select Subtitles & CC from the menu.
    In the "Manager subtitles and closed captions" menu click on the blue button to the right that is titled "Add new subtitles or CC".
    Select language from the drop down (You can create subtitles in multiple languages).
    Dropdown image for CC After you have chosen the language you have the option to upload a subtitle file, transcribe, and create new subtitles.
    Upload a Subtitle file - Using a third party application or vendor to create the subtitle file.
    Transcribe and Auto Sync - You can create a transcript and YouTube will try and match that transcription to the video. Please be sure to watch your own video to make sure the transcription matches up.
    Create a Subtitle File - You will be able to watch the video and type up your own subtitles. This is time consuming but probably the most accurate way to add subtitles and closed captioning.
    Add your subtitles or closed caption file Make sure you click the publish button to save and publish your work.
    Previously Created Videos
    Required for ADA Compliance

    Any video that you already have displayed on your site must have a link (email) where a user can request a copy of the transcript for the video.  Failure to provide a user with a transcript of the video within a timely manner will be a violation of the ADA and district policy.

    This is subject to change at any time.

    Click here for more information. 
    Add the Video to Your Page

    Now that you have uploaded the video to YouTube you will now need to add it to your site. There are two ways to do this and both require you to work with a small piece of code.
     
    Option 1. Using the Embed Code app.
    Using the Embed Code app will make it easier to add the code to the page as you only have to figure out where you need  place the app and place the code inside the app. The downside is that you are limited to where you can place the app in the page template.
     
    Preparing the app
    Navigate to the page you want to add the video to. 
    You will need to add the embed code app on your page.
    The embed code app is located to the right in the app library, this will allow you to paste the code from your Youtube video on your page. Drag the app onto your page where you would like your video to display makeing sure you have enough space on your page for the video. You can change the layout of you page if needed.
    Click on the edit Embed Code app button.
    Open another browser window and navigate to YouTube, sign in and find the video you want to add to your page.
    Click on the Share Button Getting the iFrame Code From YouTube
    On the YouTube page that has the video you would like to have on your site look for the share button located below the title of the video and your channel settings button.
    After you have clicked the share button, click on the embed option and the code for the iFrame will appear.
    Click on the embed option and the iFrame code will appear. (1)(2)
    While you can copy the code as it is now the size may not be the size you would like. By default YouTube will provide the video at about 560 pixels wide (640 pixels is maximum with for district site pages). This would take up most of the width of your page.(3)
    YouTube Embed instructions 
    Depending on the size you would like your video to be you need to select the drop down for video size and choose custom. For videos that will be the main subject of the page you will want the width to take up most of the page and will want to change the width to 600 in the first box (width) the height will be adjusted automatically. 320 pixels will be sufficient when the video will just be part of the content of a page.
    You can leave the leave the default selections for the check boxes as they are.
    Once you have altered the width on the custom video size you can go back up to the iFrame code (2). Highlight and copy the code and return back to content manager and navigate to the page and embed code app.
    Paste the code you have copied in the embed code app and click save.
    Open a browser window and navigate to the page you are working on and make sure it looks how you would like. You may have to repeat the last couple steps to make sure the video is the size you are looking for.
    Option 2. Pasting the code into the HTML in the content and flex editor app.
    Using this option is more difficult as you will have to add the iFrame code to the html of the page. This will require you to be somewhat  comfortable with html.

    You will follow the "Getting iFrame Code From YouTube" instruction above.
    Navigate to the page and flex editor or content app that you want to add the video to.
    Embed App - The embed app will allow you to paste the code that YouTube provides right into the app. This is the easiest way to add the video to your page.
    Content App - The content app will work just like the flex editor just the button to switch to html is in a different place. You will find the button on the top row of the tools.
    content app html button 
    Once you have placed the iFrame code in your page and are happy with its location please make sure you click the save button located near the top of the page.
     
     
    Embed video with Responsive Design
    (Sample Video)
    Below is the code you will need for your video and instructions on how to add the code to your page.

    <div style="max-width: 600px;">
    <div class="video-responsive" style="overflow: hidden; padding-bottom: 56.25%; position: relative; height: 0;">

    <iframe style="left: 0; top: 0; height: 100%; width: 100%; position: absolute;" src="https://www.youtube.com/embed/bA-EB9ILQDE" width="560" height="315" frameborder="0" allowfullscreen="allowfullscreen"></iframe>

    </div>
    </div>

    Step By Step Instructions

    1. Upload your video to your YouTube account.
    2. Click on the share link located below the title of your video.
    3. Select the embed option.
    4. Copy the iframe code provided.

    At this point, you will need to decide if you are going to paste the iframe code directly into the content of your page or use the embed app to easily add your video. The advantage of adding the code directly to your page is that it will allow you to add the video anywhere within the content app. The embed app is an app and therefore will be held in the layout of the page and the placement of the app.

    Embed App

    1. Add embed code app to your page where you would like the video to appear.
    2. Edit the embed code app and add the code you copied from YouTube in the app.
    3. In the code example above copy the purple code above and below and place it in the embed app exactly as shown in the example above. The green code is the same as what you copied from YouTube. This is the code that tells the browser that your video is to be used in a responsive site. This means the video will resize appropriately when the page is viewed on a mobile device.

    Directly into the content of the page

    1. Edit the content app that you would like to add the video. (You can add a video this way to any app that allows you to edit the source code)
    2. Type the words "Add Video Here" in the content where you would like the video to appear on your page. This is your marker and where you will add your iframe code.
    3. Next, you are going to locate the source code icon in the editor and click it. This will bring up another window and will show you what your page looks like in code view.
      source code

    4. Scan the contents of the source code and locate the marker you added earlier. If you followed these instructions you will be looking for "Add Video Here".
    5. Highlight your marker and paste the iframe code you copied from Youtube, overwriting the marker.
    6. In the code example above copy the purple code and place it around the iframe code from YouTube. It is important that you place the code around the iframe code exactly as it is in the example above. The code allows for the video to resize with the screen. This is very useful when viewing the video on a mobile device.
    7. Save your work and make sure to view the page to make sure it looks the way you wanted. If you need to resize the video you can change the value in the purple code that reads <div style="max-width: 600px;">  . Change the 600px to increase or decrease the width of the video. You do not need a height as the video will change the height with the width.

    If you need help with a video you would like to place on your page and these instructions are not helping, please contact Michael Morris at mmorris@washoeschools.net or connect on Teams.