If you're interested in adding videos to your challenges, you can add them to the Collaborate Space as follows. 


For videos hosted on a video sharing website like Vimeo or Youtube:

  • Add an Advanced API widget to the Collaborate space by dragging it to the Configured Widgets section in Admin > Prepare For Your Event > Collaborate Space.
  • In the Admin Title field, add a name to help you identify the video.
  • In the Direct HTML field, add this code: <div class="embed-container"><iframe allowfullscreen="" frameborder="0" mozallowfullscreen="" src="https://player.vimeo.com/video/xxxxxxxxx" webkitallowfullscreen=""></iframe></div> where player.vimeo.com/video/xxxxxxxxx is the name of the location of your video file, and then click Submit.


For videos hosted within your company's firewall:

  1. Create a thumbnail image for your video.  This image will be displayed on your Innovation Central page until the user clicks for video playback. Create the image with the same dimension ratio of your video. The thumbnail image should be greater than or equal to your largest embedded dimension.  For example, if you plan to embed the same video in Innovation Central in a 335x202px iframe and a 670x404px iframe, your thumbnail image should not be smaller than 670x404px.  Creating a thumbnail that is smaller than your iframe window or with a different dimension ratio will cause image distortion.
  2. Host this thumbnail image on a web server of your choice.  This image file can be hosted on any domain available to you.  In this example, the image is hosted on company.com: http://www.company.com/en_US/media/player/innovationcentral_exampleimage.jpg
  3. Create a HTML file with the below code.  Replace the first URL with the component player.html streaming URL from Step #1.  Replace the second URL with the path to your newly created thumbnail image. 

    <body style="margin:0;">
    <a href="http://www.company.com/en_US/media/player/component_player.html?src=/corp/envideo175_h.mp4&autostart=true" style="text-decoration:none;"><img src="/en_US/media/player/innovationcentral_exampleimage.jpg" border="0" style="width:100%;height:100%;;margin:0 0 0 0;"></a>
     </body>

  4. Host this HTML file on a webserver of your choice.  This HTML file can be hosted on any domain available to you.  In this example, the HTML is hosted on company.com: http://www.company.com/en_US/media/player/innovationcentral_example.html
  5. Follow the steps in the section above to add the video link within the Advanced API widget.


Here's an example of one video spanning the entire content area:

<table style="width: 680px;" border="0">
<tbody>
<tr>
<td style="width: 670px;" valign="center" align="center"><iframe height="404" src="" frameborder="0" width="670" allowfullscreen=""></iframe></td>
</tr>
</tbody>
 </table>

And here's an example of two videos side-by-side:

<table style="width: 680px;" border="0">
<tbody>
<tr>
<td style="width: 335px;" valign="center" align="center"><iframe height="202" src="" frameborder="0" width="335" allowfullscreen=""></iframe></td>
<td style="width: 335px;" valign="center" align="center"><iframe height="202" src="" frameborder="0" width="335" allowfullscreen=""></iframe></td>
</tr>
</tbody>
 </table>