Tech School

This page is read only. You can view the source, but not change it. Ask your administrator if you think this is wrong.
====== Web Development Lesson 6 - Media ======
===== Videos =====
==== Objectives ====
In this activity you will add video to a web page.

==== Setup ====
  * We'll continue to use 'media.php'.
  * If you need the code again, here it is. Don't worry if yours is different to this - you've probably changed your page to your own taste.

**media.php**
<code><?php
    include("header.php");
    include("menu.php");
?>
    <main>
        <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="tree at sunset" title="this was the first image listed on Google when I checked">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec enim sem, efficitur et fringilla et, pretium at turpis. Nunc interdum, dolor vitae aliquam accumsan, lacus sapien varius tortor, fringilla lobortis turpis tortor et ante. In hac habitasse platea dictumst. Nullam elementum blandit tincidunt. Sed semper finibus massa, non mollis nulla mollis et. Nunc lectus metus, tempor nec dui ut, pharetra eleifend massa. Ut tempus porta metus, eget aliquet ligula tempor hendrerit. Curabitur vestibulum elit in commodo viverra. Nullam est orci, suscipit vitae tincidunt porta, lacinia sed nulla. Quisque ex eros, consectetur id metus sit amet, molestie tempor risus. In facilisis consequat eros in convallis. Nulla nec imperdiet nibh. Suspendisse consequat sit amet mi in imperdiet. Nullam eget aliquet metus. Vestibulum non fermentum eros. Cras sodales, nisl eget congue interdum, massa nulla porta lectus, quis suscipit est ipsum sit amet ante.</p>
        <p>Morbi gravida malesuada odio, sed pretium libero aliquam vitae. Suspendisse potenti. Nunc eget leo vulputate, dictum eros non, gravida lorem. In id nunc id orci ornare porttitor. Maecenas id laoreet risus. Aenean lacinia dignissim volutpat. Morbi et ligula ac purus gravida aliquet. Integer feugiat sapien ac porttitor iaculis.</p>
        <p>Phasellus pretium sit amet tellus ac tincidunt. Curabitur in ligula massa. Vivamus in urna suscipit, vehicula velit et, mollis purus. Aliquam sed risus vel urna tristique aliquam. Etiam egestas lectus arcu, quis lobortis diam luctus in. Vivamus id diam metus. Nulla bibendum dolor sit amet egestas semper. Praesent facilisis pellentesque condimentum.</p>
        <p>Mauris ac sapien justo. Curabitur a feugiat velit. Donec non mi ac turpis faucibus hendrerit. Nulla luctus est lectus, nec rhoncus nisi eleifend ac. Nullam iaculis mi eget faucibus mattis. Nullam nec cursus nisi. Donec vel nunc ac felis sodales tincidunt sed condimentum mauris.</p>
        <p>Praesent lobortis dictum purus, convallis dapibus velit malesuada non. Sed sit amet magna sagittis, maximus odio in, mattis erat. Phasellus ultricies risus turpis, vitae tempor diam finibus eu. Sed luctus augue purus, eget consectetur sapien egestas et. Sed eget tristique mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum rhoncus vehicula pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean placerat arcu vitae nisi vehicula semper. Cras sit amet risus dolor.</p>
    </main>
<?php
    include("footer.php");
?></code>

**style.css**
<code>ol {
    color: blue;
  }
  
  ol ol {
    font-weight: 700;
  }

ul {
  list-style-type: none;
}

td, th {
  border-width: 1px;
  border-style: solid;
}

td {
  padding: 10px;
}

table {
  border-collapse: collapse;
}

header {
  background-color:indianred;
  border:darkred solid 2px;
  height: 100px;
  position: absolute;
  left: 16%;
  right: 0px;
  top: 0px;
}

nav {
  background-color: burlywood;
  border:yellow solid 2px;
  position: fixed;
  top: 0px;
  bottom: 0px;
  width: 16%;
  left: 0px;
}

main {
  background-color: lightgree;
  border: darkgreen solid 2px;
  position: absolute;
  top: 100px;
  left: 16%;
  right: 0px;
  bottom: 80px;
  overflow: scroll;
  padding: 20px;
}

footer {
  background-color: lightskyblue;
  border: darkblue solid 2px;
  position: absolute;
  bottom: 0px;
  height: 80px;
  left: 16%;
  right: 0px;
}

.content {
  background-color:coral;
  border:orangered solid 2px;
  height: 400px;
  padding: 40px;
  margin: 20px;
  display: inline-block;
  width: 300px;
}

img {
  float: left;
  max-height: 250px;
  border: solid 2px green;
  margin: 20px 20px 20px 0px;
  padding: 10px;
  border-radius: 30px;
}</code>

==== Video ====
  * Start a new line after the text, before the closing <html></main></html> tag.
  * Add the following code.
<code>        <video src="http://it.bibliotecasmedellin.gov.co/bibliolabs/numeros/1.mp4"></video></code>
  * You should be able to understand this code. It will place a video in your page, in this case located on the Medellin Libraries. This video was put together by my colleagues to teach sign language.
  * If you look at the result (save and upload your file first) the first thing you'll notice is that the video takes up way more space than necessary. Let's fix that.
<code>video {
  max-height: 250px;
}</code>
  * Better?

==== Attributes ====
  * The next thing you'll notice is that it doesn't look like a video. It's just an image with no motion and no controls. We need to add those manually.
<code>        <video src="http://it.bibliotecasmedellin.gov.co/bibliolabs/numeros/1.mp4" controls muted loop autoplay></video></code>
  * Here, we're adding four different attributes to the video file.
  * <html>controls</html> adds the standard controls to the bottom of the video player.
  * <html>muted</html> sets the audio volume to zero so it won't bother your users when they first open the page.
  * <html>loop</html> tells the browser to replay the video when it ends. Because it's very short, we want it to run more than once.
  * <html>autoplay</html> tells the browser to start the video as soon as it's ready. Without this, the video will wait for the user to press play.

==== Clear ====
  * Let's wrap the text around the video too.
  * First, move the video up three lines so it's between the second and third paragraph.
<code>        <img src="https://cdn.pixabay.com/photo/2015/04/23/22/00/tree-736885__480.jpg" alt="tree at sunset" title="this was the first image listed on Google when I checked">
        <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec enim sem, efficitur et fringilla et, pretium at turpis. Nunc interdum, dolor vitae aliquam accumsan, lacus sapien varius tortor, fringilla lobortis turpis tortor et ante. In hac habitasse platea dictumst. Nullam elementum blandit tincidunt. Sed semper finibus massa, non mollis nulla mollis et. Nunc lectus metus, tempor nec dui ut, pharetra eleifend massa. Ut tempus porta metus, eget aliquet ligula tempor hendrerit. Curabitur vestibulum elit in commodo viverra. Nullam est orci, suscipit vitae tincidunt porta, lacinia sed nulla. Quisque ex eros, consectetur id metus sit amet, molestie tempor risus. In facilisis consequat eros in convallis. Nulla nec imperdiet nibh. Suspendisse consequat sit amet mi in imperdiet. Nullam eget aliquet metus. Vestibulum non fermentum eros. Cras sodales, nisl eget congue interdum, massa nulla porta lectus, quis suscipit est ipsum sit amet ante.</p>
        <p>Morbi gravida malesuada odio, sed pretium libero aliquam vitae. Suspendisse potenti. Nunc eget leo vulputate, dictum eros non, gravida lorem. In id nunc id orci ornare porttitor. Maecenas id laoreet risus. Aenean lacinia dignissim volutpat. Morbi et ligula ac purus gravida aliquet. Integer feugiat sapien ac porttitor iaculis.</p>
        <video src="http://it.bibliotecasmedellin.gov.co/bibliolabs/numeros/1.mp4" controls muted loop autoplay></video>
        <p>Phasellus pretium sit amet tellus ac tincidunt. Curabitur in ligula massa. Vivamus in urna suscipit, vehicula velit et, mollis purus. Aliquam sed risus vel urna tristique aliquam. Etiam egestas lectus arcu, quis lobortis diam luctus in. Vivamus id diam metus. Nulla bibendum dolor sit amet egestas semper. Praesent facilisis pellentesque condimentum.</p>
        <p>Mauris ac sapien justo. Curabitur a feugiat velit. Donec non mi ac turpis faucibus hendrerit. Nulla luctus est lectus, nec rhoncus nisi eleifend ac. Nullam iaculis mi eget faucibus mattis. Nullam nec cursus nisi. Donec vel nunc ac felis sodales tincidunt sed condimentum mauris.</p>
        <p>Praesent lobortis dictum purus, convallis dapibus velit malesuada non. Sed sit amet magna sagittis, maximus odio in, mattis erat. Phasellus ultricies risus turpis, vitae tempor diam finibus eu. Sed luctus augue purus, eget consectetur sapien egestas et. Sed eget tristique mauris. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum rhoncus vehicula pellentesque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Aenean placerat arcu vitae nisi vehicula semper. Cras sit amet risus dolor.</p></code>
  * You'll notice that the positioning of the video is pretty awful now. It's 'floating' to the right of the image, but that's really out in the middle of nowhere. And because it has no <html>float</html> value of its own, the text isn't floating around it either.
  * Let's move it to the right.
<code>  float: right;</code>
  * Now it's looking better. It's sitting on the other side of the <html><main></html> element with the text flowing between them.
  * Perhaps you don't like this look because there isn't enough space for text between the image and the video. You could always move the video down below the next paragraph, but that gets awkward if you ever want to change the parapraph text or have it created dynamically. Instead, we can tell the video to drop down far enough that it 'clears' the other floating elements.
<code>  clear: left;</code>
  * Here, we only have one other floating element and it's on the left, so we've used that option. We could also use 'right' or 'both' as options.

==== General Styling ====
  * Let's finish off by applying the same padding and margins.
<code>  margin: 20px 0px 20px 20px;
  padding: 10px;</code>
  * Though I'm not sure you'd ever want to do this, you can also round the corners of the video with the same CSS as for images.
  * Feel free to add a border if you think that looks better, too.

[[en:web_development:media:audio|Next: Audio]]
Tech School

User Tools

Site Tools

Page Tools
