Adding media

Audio, Images and Videos can be added to a Guide page.

Audio

Audio files can be added to and played from your project.

To add Audio: select Media icon in the guides editor ribbon where you can define the source audio file along with any actions the should be triggered at specific times during playback.

Media

  • Source Name - select the source file either from .guides/media folder if already uploaded to the project or upload directly from your PC and it will be stored in the .guides/media folder.

  • Add Action - specifies actions that are triggered at specific times during playback. The following options are available.

    Open file Close file Open Terminal Close Terminal Run command Highlight Close all tabs Pause

Images

Inserting an image is similar. You can use the Image icon in the guides editor ribbon or write in markdown within your content area. Here are some examples. PNG and JPG image types are supported. Note that the 2nd and 3rd examples point to images within your project.

Store your images in the .guides/img folder if you do not want them to be readily accessible to students.

![optional alt tag](http://any-url-you-like.png)
![](image-in-project-root.jpg)
![](.guides/img/best-place-for-images.png)

You can drag/drop images from your project file tree into your content. They will automatically contain the correct path.

For Markdown pages:

![.guides/img/displayimage](.guides/img/displayimage.png)

For HTML pages:

![.guides/img/displayimage](.guides/img/displayimage.png)

Videos

You can use the Image icon in the guides editor ribbon defining the URL to the video or you can manually add to your content.

Include embedded videos using the standard <iframe> html tag.

YouTube

If you wish to embed a YouTube video, go to the Share option and select Embed to obtain the code snippet.

You Tube embed

` <iframe width="560" height="315" src="//www.youtube.com/embed/1JNhoVbmNAo" frameborder="0" allowfullscreen></iframe> `

Vimeo

If you wish to embed a Vimeo video, go to the Share option and select Embed to obtain the code snippet.

Vimeo embed

` <iframe src="//player.vimeo.com/video/110479088" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> <p><a href="http://vimeo.com/110479088">Codio - Innovation in Computer Programming Education</a> from <a href="http://vimeo.com/user20752628">Codio</a> on <a href="https://vimeo.com">Vimeo</a>.</p> `

iframes

You can embed content in an iframe using the <iframe> html tag.

To embed from Google Docs, go to File>Publish to Web and select Embed to get the code snippet

iframe embed