Default Badge

Create a page where audio files or videos are loaded via an iframe. Use a link to change what audio/video file is played.

Introducing the iFrame

An <iframe> allows you to “embed” one webpage inside of another.

  • Add an <iframe> tag.
  • Assign it a src="" attribute.
  • Put a URL inside the SRC. Ex: src="//www.google.com"

Remember the Target attribute?

We mentioned links can have a target=”” attribute.

The following will opening your links in a new window:

<a href="//www.google.com" target="_new">Google</a>

You can use the target="" attribute to change an iframe.

 Creating a Media Player

Let’s create a page about our favorite videos! You will need an <iframe> and <a> tags.

  • Assign the iframe a name="genius"
  • Assign the links a target="genius" attribute.

When you click the links, they should change the video. Cool!

Extras

  • Customize the font-family of your page and apply for the Stylin’ Level 1 badge
  • Add a logo or any image to your page and apply for the IMAGEnation badge.