O'Reilly logo

HTML5 Multimedia Development Cookbook by Lee Jordan, Dale Cruse

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

Movable video ads using jQuery

We will be creating a video ad on a website that will move as the user scrolls down the page using jQuery and the video tag.

Getting ready

You will need a video file in multiple formats such as .ogg/.ogv, .mp4, and .webm, or use a video service such as http://www.vid.ly.com to serve cross-browser videos. This example was not tested in Internet Explorer, but should work fine in recent versions of Safari, Google Chrome, Opera, and Firefox.

How to do it...

We will begin by creating a typical website page. Open a new file in your editor, and save it as movable-video-ad.html. Type <!DOCTYPE html> <html lang="en"><head><meta charset="utf-8" /><title>Movable Video Ad</title> to place the first tags on the page.

Now, create ...

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required