IGEM:Imperial/2010/Vid Embed

From OpenWetWare
Revision as of 13:55, 21 August 2013 by Lucy Clark (talk | contribs)

Video embedding

Here just experiment with embedding videos. There is several options, but the common requirement for them to show is to enter the begging and end of the html.


  • Youtube Original: Youtube offers really easy embedding:
  1. Just click on the button embed below the video and then one is offered a variety of size and player colour options. Really intuitive to use.
  2. Then just copy the generated code and paste it into wiki!

Youtube allows creation of embedded play lists too. Though, this needs further investigation into "how to".

When it comes to how much publicly the videos are available, there seem to be two options:

  1. Private Videos allow to share link to video with 25 specific youtube users (however, that may eliminate ability to embed the video in the wiki)
  2. Unlisted Videos - they don't appear in any searches but are available to be viewed by any user who has the URL - that seems like a best option for us. However, it says something about having YouTube Account in "good standing" /not sure what that means/.


<html> <object width="640" height="505"><param name="movie" value="http://www.youtube-nocookie.com/v/TI1BLXk7uiw&amp;hl=en_GB&amp;fs=1?rel=0&amp;color1=0x3a3a3a&amp;color2=0x999999"></param><param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param><embed src="http://www.youtube-nocookie.com/v/TI1BLXk7uiw&amp;hl=en_GB&amp;fs=1?rel=0&amp;color1=0x3a3a3a&amp;color2=0x999999" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="640" height="505"></embed></object> </html>

  • Youtube new look embedding

The code seems to be way simpler and easier to understand. Just reuse that and change the URL for the video that you want to embed.

<html> <iframe class="youtube-player" type="text/html" width="640" height="505" src="http://www.youtube.com/embed/TI1BLXk7uiw" frameborder="0"></iframe> </html>

  • Kaltura - video hosting website. Allows to upload 10GB of videos for free. It allows quite a wide customisation of the player. Probably it would be useful when designing the final wiki (looks of the player may matter for us). It generates the code to embed as well, but it seems that it's not as concise as the Youtube one.

It as well allows to keep the videos to be allowed to be embedded in certain domain (eg: openwetware.org).

It sounds like an option to use in case there was any significant trouble with Youtube.

<html> <object id="kaltura_player" name="kaltura_player" type="application/x-shockwave-flash" allowFullScreen="true" allowNetworking="all" allowScriptAccess="always" height="360" width="400" xmlns:dc="http://purl.org/dc/terms/" xmlns:media="http://search.yahoo.com/searchmonkey/media/" rel="media:video" resource="http://www.kaltura.com/index.php/kwidget/cache_st/1280208063/wid/_335891/uiconf_id/1921351/entry_id/1_f474ajt6" data="http://www.kaltura.com/index.php/kwidget/cache_st/1280208063/wid/_335891/uiconf_id/1921351/entry_id/1_f474ajt6"><param name="allowFullScreen" value="true" /><param name="allowNetworking" value="all" /><param name="allowScriptAccess" value="always" /><param name="bgcolor" value="#000000" /><param name="flashVars" value="&" /><param name="movie" value="http://www.kaltura.com/index.php/kwidget/cache_st/1280208063/wid/_335891/uiconf_id/1921351/entry_id/1_f474ajt6" /><a href="http://corp.kaltura.com">video platform</a> <a href="http://corp.kaltura.com/technology/video_management">video management</a> <a href="http://corp.kaltura.com/solutions/overview">video solutions</a> <a href="http://corp.kaltura.com/technology/video_player">video player</a> <a rel="media:thumbnail" href="http://cdnbakmi.kaltura.com/p/335891/sp/33589100/thumbnail/entry_id/1_f474ajt6/width/120/height/90/bgcolor/000000/type/2" /> <span property="dc:description" content="Kaltura anmated logo" /><span property="media:title" content="Sample Kaltura Animated Logo" /> <span property="media:width" content="400" /><span property="media:height" content="360" /> <span property="media:type" content="application/x-shockwave-flash" /> </object></html>

  • Plumi - another alternative worth looking at

Photo embedding

Cool slide shows to be embeded using Google Picassa:

<html> <iframe class="youtube-player" type="text/html" width="640" height="505" src="http://www.youtube.com/embed/rD5uNAMbDaQ" frameborder="0"></iframe> </html>