Soccer Video - Exercise

Contact Us or call 1-877-932-8228
Soccer Video - Exercise

Soccer Video

Duration: 20 to 30 minutes.

In this exercise, you will add several videos to an interior page on the Pickup Soccer site. The following screenshots shows the page on an iPhone - the screen capture on the left is the top of the page and the screen capture on the right is the bottom of the page:

two iPhone screencaptures - solution to exercise

  1. Open Video/Exercises/video/index.html in your file editor.
  2. Find and embed a video from YouTube or Vimeo; test to make sure the video works on both desktop and mobile browsers; be sure to address flexible width for the embedded element, especially on mobile.
  3. Use the video tag to display the video (the "Big Buck Bunny" video) as a video player underneath the embedded video; use Video/Exercises/video/images/poster.png as the poster image for the video.
  4. Add buttons below the video tag to allow the user to play, pause, and control the volume for the video.
  5. Be sure to address the width of the video element, especially on mobile.
  6. Test your work in both desktop and mobile browsers.


If your current setup allows and you have access to raw video footage, convert your own video file to .mp4, .ogv, and .webm formats; use these files in the video tag for your solution. Use any of the options listed above - Handbrake, Miro, Firefogg, - or another video-conversion method. Be sure to test your video on a variety of devices.


<!DOCTYPE html>
	<title>Soccer Pickup</title>
	<link rel="stylesheet" type="text/css" href="css/reset.css" />
	<link rel="stylesheet" type="text/css" href="css/style.css" />
	<meta name="viewport" content="initial-scale=1.0, width=device-width" />

	<div id="container">
		<a href="index.html"><img src="images/logo.png" alt="Soccer Pickup" id="logo" /></a>
		<nav id="mainnav">
			<li><a href="index.html">Home</a></li>
			<li><a href="find-a-game.html">Find a Game</a></li>
			<li><a href="about.html">About</a></li>
			<li><a href="contact.html">Contact</a></li>
	<div id="maincontent">
		<h1>Soccer Video</h1>
		<p>Embedded video:</p>
		<iframe src="" width="400" height="225" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen></iframe><p><a href="">FIFA World Cup 2010 South Africa</a> from <a href="">Christopher Guinness</a> on <a href="">Vimeo</a>.</p>
		<p>Hosted video:</p>
		<video width="720" height="405" controls poster="images/poster.png" id="vid">
			<source type="video/mp4" src=""></source>
			<source type="video/webm" src=""></source>
			<source type="video/ogg" src=""></source>
			<p>Your browser does not support the video tag</p>

		<button onclick="document.getElementById('vid').play()">
		<button onclick="document.getElementById('vid').pause()">
		<button onclick="document.getElementById('vid').volume+=0.1">
				Incr. Volume</button>  
		<button onclick="document.getElementById('vid').volume-=0.1">
				Decr. Volume</button>
	<aside id="sidebar">
		<h3>About Us</h3>
		<p>Soccer Pickup is your source for finding local recreational soccer games for adults. Leagues are great - but sometimes you just want to lace up your boots and find an informal game. Check back often to find a game near you!</p>
	<footer id="footerinfo">
		<p>Soccer Pickup: Your guide to finding a game.</p>

Code Explanation:

We choose a FIFA 2010 World Cup video from Vimeo to embed, pasting the Vimeo-supplied iframe code into our page; we set the iframe element to have max-width: 100% in Video/Solutions/video/css/style.css.

We use the video tag to present the video, supplying three different versions (.mp4, .ogv, and .webm) of the same video clip to work on a wide variety of browsers. We use button tags, with an onclick handler, to allow the user to control the video on desktop browsers.