Home > Chapter Review and Exercises > Chapter 10 Exercises

Read pages 215-217 before starting Exercise 10-1.

Exercise 10-1 What you need to know for this exercise

<iframe> element

• An iframe puts an HTML page inside an HTML page.

• For further information go to: https://www.w3schools.com/tags/tag_iframe.asp

Things to notice:

• 1. There’s an opening <iframe> tag and a closing </iframe> tag.

  2. src="[URL]" specifies the location of the HTML file that’s to be imbedded, the same way src="[URL]" specifies the location of an image <img> element file.

  3. You specify width and height in pixels. Scrollbars allow the user to explore the whole embedded page.

  4. You can center an iframe.  This is an example of the internal CSS:

iframe { display: block; float: left; width: 800px; height: 400px; border: 0; margin: 0 2em 0 0; }  

5. The <iframe> element is an inline element (it does not insert a new line on a page), meaning that text and other elements can wrap around it.  Therefore, it can be useful to specify the alignment of the <iframe> according to surrounding elements. 

6. You can practice using iframes here:

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe 

7. You can practice how text gets wrapped around a floating iframe here:

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml_iframe_align_css 

<iframe> attributes

• • Refer back to: https://www.w3schools.com/tags/tag_iframe.asp

  • NOTE: The following are the only attributes that are compatible with HTML5.  Ignore the others on that w3schools.com page.

1. Alignment according to surrounding elements

• • • Example: <iframe style="float:right">

    • The float attribute and its values: float: none/left/right/initial/inherit;

    • Click on this link to learn about the CSS float property:

    • https://www.w3schools.com/cssref/pr_class_float.asp 

2. Name

• • • Acts as a target for a hyperlink.

Example: <iframe src="demo_iframe.htm" name="iframe_a"></iframe>

• • • You can practice the HTML name attribute here:

https://www.w3schools.com/tags/att_iframe_name.asp 

• • • You can make the target of a link to match the name of the iframe, the link will open in the iframe:

https://www.w3schools.com/tags/att_iframe_name.asp

3. Height

• • • The height of the iframe in pixels

4. Width

• • • The width of the iframe in pixels

5. Src

• • • The address of the document to embed in the <iframe>

Here is an example of a YouTube <iframe> embed

<iframe width="560" height="315" src="https://www.youtube.com/embed/mP28nymtNdM?controls=0" frameborder="0" allow="autoplay; picture-in-picture" allowfullscreen></iframe>

YouTube attribute Settings

• • Refer to https://www.w3schools.com/html/html_youtube.asp

Width="560"

• • This means 560 pixels

Height="315"

• • This means 315 pixels

src=" "

• • This is the URL of the YouTube video

controls=0

• • This tells YouTube you do not want the media player controls to be visible.

frameborder ="0"

• • No frame border. If you'd like a frame border, change the "0" to a "1".

autoplay

• • Value 0 (default): The video will not play automatically when the player loads.

  • Value 1: The video will play automatically when the player loads.

picture-in-picture

• • Allows picture-in-picture mode to work. To see how this works, right-click any YouTube video twice and click “Picture in Picture” from the context menu.

  • Once you enable picture-in-picture mode, the tab that the video is playing from will display a small icon, similar to how Chrome will show a speaker symbol to let you locate the source of any audio that’s playing.

  • The video overlay can be moved anywhere on the screen with a quick drag and drop.

allowfullscreen

• • If you don’t want the user to be able to enlarge the frame to full screen size, delete allowfullscreen.

NOTE: Frequently, some of the controls listed above will not work with YouTube videos, most notably the autoplay and loop attributes.

For further understanding of the <video> element, refer to:

https://www.w3schools.com/html/html5_video.asp

Exercise 10-1 Walkthrough

Page 217

Step 1

Navigate in File Explorer to your Dropbox folder.  From there go to your Class folder, and then the 1.Class text Exercises folder.  Finally, open the Ch10 folder.  There are three files in that folder: windtunnel.mp4, windtunnel.ogg, and windtunnel.webm.  Those files will be used in Exercise 10-2 which follows this exercise.

Step 2

Create a new HTML document in your text editor (i.e. Sublime), including the basic structural elements that where covered in Chapter 4, and call it index.html.  Give it a title of "iframe example."

<!DOCTYPE html >

<html>

<head>

   <meta charset="utf-8" >

   <title>iframe example</title>

</head>

<body>

</body>

</html>

Step 3

Use the Windows-key + left-arrow to move the Sublime text editor to the left side of the screen.  

Step 4

Open up the Chrome web browser (or Safari if you are using MacOS).

Step 5

Use the Windows-key + right-arrow to move Chrome so it is on the right-side of your screen.

Step 6

Go to YouTube.com and find a video (any video will do).

Step 7

Once you have found a video, click on the Share button which is located below the video.

Step 8

When the Share window opens, choose the Embed option.

Step 9

The Embedded Video window.  If needed you can reset the Start time to 0:00.  Click on the Copy button to copy the iframe into your clipboard.

Step 10

Return to your text editor (i.e. Sublime), and insert the copied iframe into the body of your index.html file using the Paste function (CTRL + V).  A sample YouTube video iframe embed is shown below, inserted in the body section of the index.html website document.

<!DOCTYPE html >

<html>

<head>

  <meta charset="utf-8" >

  <title>iframe example</title>

</head>

<body>

  <iframe width="560" height="315" src="https://www.youtube.com/embed/XqZsoesa55w" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

</body>

</html>

Step 11

Save your index.html document using either the File pull-down menu and selecting Save, or use the keyboard shortcut CTRL + S).

Step 12

Open the index.html file in a web browser.  In Sublime you do this by right-clicking your mouse on the document and selecting Open in Browser.

Step 13

Do you see that website inside your website?

Read pages 218-227 before starting Exercise 10-2.

Exercise 10-2 What you need to know for this exercise

<video> element

• • The <video> element puts a video on a website.

  • You can practice this here:  https://www.w3schools.com/tags/tag_video.asp

  • Example: Here is a simple <video> element that embeds a movie on a web page:

<video src="highlight_reel.mp4" width="640" height="480"

poster="highlight_still.jpg" controls autoplay>

Your browser does not support HTML5 video. Get the <a href="highlight_reel.mp4">MP4 video</a>

</video>

• • The text between the <video> and </video> tags will only be displayed in browsers that do not support the <video> media player, and lets the user download the video.

Things to notice:

• • There’s an opening <video> tag and a closing </video> tag.

  • src="[URL]" specifies the location of the video file that’s to be shown.

  • There are lots of video formats you can use, but I would recommend only using mp4.

  • You specify width and height in pixels.

  • You can practice this here:

https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_video 

• • Note: The <source> element allows you to specify alternative video files which the browser may choose from.  The browser will use the first recognized format.  (Reference: Page 222 of the class text)

<video> attributes

• • Refer back to: https://www.w3schools.com/tags/tag_video.asp

1. Height & Width

• • • The height and width of the media player in pixels.

2. Src

• • • The URL of the video file.

3. Controls

• • • When present, it specifies that video controls should be displayed.

4. Autoplay

• • • When present, the video will automatically start playing as soon as it can do so without stopping.  In general, use of autoplay should be avoided in favor of letting the user decide when the video should start.

5. Loop

• • • When present, it specifies that the video will start over and over again, every time it is finished.

6. Poster

• • • Specifies an image to be shown while the video is downloading, or until the user hits the play button.

<audio> element

• The <audio> element puts an audio recording inside an HTML page.

• Go to https://www.w3schools.com/html/html5_audio.asp

• Here is an example of an <audio> element:

<audio controls>

<source src="horse.ogg" type="audio/ogg">

<source src="horse.mp3" type="audio/mpeg">

Your browser does not support the audio element.

</audio>

Things to notice:

• • The <audio> element uses only one element called <source> and one attribute called controls.

  • There’s an opening <audio> tag and a closing </audio> tag.

  • The controls attribute adds audio controls, like play, pause, and volume.

  • The <source> element allows you to specify alternative audio files which the browser may choose from. The browser will use the first recognized format.

  • The text between the <audio> and </audio> tags will only be displayed in browsers that do not support the <audio> element.

  • src="[URL]" specifies the location of the audio file that’s to be shown.

  • There are lots of audio formats, but I would recommend only using mp3.

  • If you only have one audio file that you are using, the <source> element is not needed.

  • The <audio> element has additional attributes, such as autoplay and loop. One such <audio> element might look like this:

   <audio src="jetfighter.mp3" autoplay loop></audio>

• • However, the autoplay attribute would play the audio recording automatically, and the loop attribute would make it play over and over, and that might not be a good idea.    (Reference: page 225 of the class text)

  • You can practice this here:

    https://www.w3schools.com/html/tryit.asp?filename=tryhtml5_audio_all 

Exercise 10-2 Walkthrough

Page 228

Step 1

Navigate in File Explorer to your Dropbox folder.  From there go to your Class folder, and then the 1.Class text Exercises folder.  Finally, open the Ch10 folder.  In addition to the index.html document you created in Exercise 10-1, there are three other files in that folder: windtunnel.mp4, windtunnel.ogg, and windtunnel.webm.  

Step 2

Open your index.html document in your text editor (i.e. Sublime). 

Step 3

Remove the <iframe> you previously inserted in the index.html document back in Exercise 10-1.   Then add the video element for the windtunnel.mp4 video.  

<!DOCTYPE html >

<html>

<head>

  <meta charset="utf-8" >

  <title>iframe example</title>

</head>

<body>

<video src="windtunnel.mp4" width="320" height="262" controls>

Sorry, your browser doesn't support HTML5 video.

</video>

</body>

</html>

Step 4

Save your index.html document using either the File pull-down menu and selecting Save, or use the keyboard shortcut CTRL + S).

Step 5

Open the index.html file in a web browser.  In Sublime you do this by right-clicking your mouse on the document and selecting Open in Browser.

Step 6

Did you see the wind tunnel video on your index.html webpage?  

Step 7

Try resizing the width and height attributes.  For example, you could reduce each by 50% as shown here.

<!DOCTYPE html >

<html>

<head>

<meta charset="utf-8" >

<title>iframe example</title>

</head>

<body>

<video src="windtunnel.mp4" width="160" height="131" controls>

Sorry, your browser doesn't support HTML5 video.

</video>

</body>

</html>

Step 8

Save and view index.html in your browser.  Note the size difference of the video.

Step 9

Add the autoplay attribute.  The autoplay attribue will start the video automatically when the webpage is opened in a browser.

<!DOCTYPE html >

<html>

<head>

<meta charset="utf-8" >

<title>iframe example</title>

</head>

<body>

<video src="windtunnel.mp4" width="160" height="131" controls autoplay>

Sorry, your browser doesn't support HTML5 video.

</video>

</body>

</html>

Step 10

Save and view index.html in your browser.  Did the video start all by itself?

Step 11

Remove the controls attribute and see what that’s like as a user.

<!DOCTYPE html >

<html>

<head>

<meta charset="utf-8" >

<title>iframe example</title>

</head>

<body>

<video src="windtunnel.mp4" width="160" height="131" autoplay>

Sorry, your browser doesn't support HTML5 video.

</video>

</body>

</html>

Step 12

Save and view index.html in your browser.  Did the video controls disappear?

Step 13

Rewrite the video element using source elements for each of the three provided video formats.

<!doctype html>

<html>

<head>

<meta charset="UTF-8">

<title>Video Test</title>

</head>

<body>

<video src="windtunnel.mp4" width="320" height="262" controls>

Your browser doesn't support HTML5 video. Sorry.

</video>

<video id="video" controls width="320" height="262" >        

  <source src="windtunnel.webm" type="video/webm">

  <source src="windtunnel.mp4" type="video/mp4">

  <source src="windtunnel.ogg" type="video/ogg">       

  Your browser doesn't support HTML5 video. Sorry.

</video>

</body>

</html>

Step 14

Save and view index.html in your browser.  Did the video work as before?