Buy Now ($95) | MBX Home | User Guide | Displaying Videos
Displaying Video in Magic Box
Magic Box supports iframe-based players, such as YouTube, Vimeo, Metacafe, and other similar services. If you are a proficient video creator, you can also use a dedicated third-party player, as long as you embed the player inside an iframe. Most player developers will be able to help you do that. The following thumbnails launch a single Magic Box show, comprised of two slides. Each slide displays a video.
The above two thumbnails were created by running the video and using Windows Print Screen to make a screen capture. The screen capture was then pasted into a Fireworks document, cropped, and resized to 200 pixels wide. We also added a filled triangle. We inserted the two images on our page and used the Magic Box Trigger UI to point them at the relevant slide in our Magic Box show.
How to display videos
Videos are always displayed inside Content Slides. So for every video you wish to display, as part of your Magic Box show, create a Content Slide. Once the Content Slide is on your page, locate it. It will look like this:
<< MBX Content Slide 1 - Add Your Content Here >>
Switch to Code View and it will look like this:
<p><< MBX Content Slide 1 - Add Your Content Here >></p>
Replace the default boilerplate paragraph with a video wrapper DIV:
<div class="video-wrapper">
</div>
Inside the video wrapper DIV, paste the embed code for your video's iframe, which you copied on your video service's web site. Let's use a YouTube embed code for this example:
<div class="video-wrapper">
<iframe width="560" height="315" src="https://www.youtube.com/embed/1W7r4Hmu0lk?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>
</div
That's all there is to it.
Launching the Magic Box Show
You can launch a Magic Box show via your own links or images, as we did above. Or you can set thumbnails to show in the main interface. If you do that, you can either use the default thumbnail icon we supply in the p7mbx/img folder, or you can create your own custom thumbnails. The show below uses custom icons, positioned by the main Magic Box UI.