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.
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.
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 a reference link for our default stylesheet <link rel="stylesheet" href="css/main.css" type="text/css" media="screen" charset="utf-8" />
and a secondary stylesheet named <link rel="stylesheet" href="css/scroll...