<< Chapter < Page Chapter >> Page >

The final CNXML code for embedding this movie is as follows:

<figure id="moonlanding-youtube"><title>One Small Step for (a) Man</title><media id="yt-media" display="block" alt="Video of the Neil Armstrong on the Moon"><iframe width="425" height="344" src="http://www.youtube.com/v/RMINSD7MmT4&amp;rel=0"/></media></figure>

And results in the following:

One small step for (a) man

Though the steps described above may look intimidating, the actual process isn't actually that hard. To embed your YouTube video, just perform the following steps:
  1. Copy the example code above into your module.
  2. Replace the URL with the one provided in the<embed>element in the HTML snippet provided by YouTube.
  3. Escape the ampersand characters in the URL by replacing & with &amp; .
  4. Adjust the height and width parameters to change the size of the video (optional).
If you are including more than one YouTube video and are using the code provided, don't forget to change the id for the <figure> , <media> , and <flash> elements each time you add a new video.

Embedding slideshare presentations

If you choose to include SlideShare presentations in your module, you will need to first copy the information provided in the Embed HTML snippet provided by SlideShare for the presentation you wish to use. As an example, consider this slideshow taken from our standard Connexions presentation. The Embed snippet for this presentation is as follows:

Connexions: create globally, educate locally

<iframe src="http://www.slideshare.net/slideshow/embed_code/1888644?rel=0" width="427" height="356" frameborder="0" marginwidth="0" marginheight="0" scrolling="no" style="border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px"allowfullscreen webkitallowfullscreen mozallowfullscreen></iframe><div style="margin-bottom:5px"><strong><a href="http://www.slideshare.net/cnxorg/cnxdemo" title="CNXDemo" target="_blank">CNXDemo</a></strong>from<strong><a href="http://www.slideshare.net/cnxorg" target="_blank">Connexions</a></strong></div> Since this code is designed for use on websites and not the CNXML language, the majority of this snippet is not necessary. The part that is important is the iframe tag . You will copy that, but delete all the options but height and width: <iframe src="http://www.slideshare.net/slideshow/embed_code/1888644?rel=0"width="425" height="355"></iframe> The CNXML example below illustrates how to embed a SlideShare player in your module.
  • The src attribute is set to the embed URL for the slideshow, not the URL for the page on the SlideShare website . The embed URL is the one found in the code snippet as shown above and is of the form "http://www.slideshare.net/slideshow/embed_code/[PresentationID]?rel=0" (where [PresentationID] is the ID and title of the slideshow you wish to include in your module).
  • After you copy the embed URL, you need to replace any & characters with &amp; . The & character is a special character in CNXML and must be escaped in this manner, otherwise you will get an error when you try to save your module.

Get Jobilize Job Search Mobile App in your pocket Now!

Get it on Google Play Download on the App Store Now




Source:  OpenStax, Ideas and tools for improving connexions modules and collections. OpenStax CNX. Mar 22, 2010 Download for free at http://cnx.org/content/col11184/1.2
Google Play and the Google Play logo are trademarks of Google Inc.

Notification Switch

Would you like to follow the 'Ideas and tools for improving connexions modules and collections' conversation and receive update notifications?

Ask