Announcement

Collapse
No announcement yet.

Add text description to videos on web page

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Add text description to videos on web page

    I have two questions. I need to add some space between the video players on my iis web site, and I'm using multiple <br> tags. Is that the correct way to do it, or is there another way to do this?
    This is my html code:

    <!doctype html>
    <html>
    <head>
    <title>html video</title>


    <body>


    <H1 align="center">WELCOME TO THE ASCNYC INTRANET WEBSITE</H1>
    <br>

    <H2 align="center">This site contains instructional videos that will assist you with accessing resources on the ASCNYC network</H2>
    <h2 align="center">Click the start button on the video that you want to view, then double click in the video itself to expand it to full screen.Then click the escape key or anywhere on the video to reduce it.</h2>

    <h3 align="center">If you have any suggestions for new videos, email the IT department at <a href="mailto:">IT@ascnyc.org</a>.

    <HR>
    <video id="rdweb.mp4" width="320" height="240" controls>
    <source src="rdweb_x264.mp4" type="video/mp4 " />
    <source src="rdweb_VP8.webm" type="video/webm" />
    <source src="rdweb_libtheora.ogv" type="video/ogg" />

    </video>




    <video id="testfor web" width="320" height="240" controls>
    <source src="testfor web_x264.mp4" type="video/mp4" />
    <source src="testfor web_libtheora.ogv" type="video/ogg" />
    <source src="testfor web_vp8.webm" type="video/webm" />
    </video>

    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    <video id="testfor web" width="320" height="240" controls>
    <source src="testfor web_x264.mp4" type="video/mp4" />
    <source src="testfor web_libtheora.ogv" type="video/ogg" />
    <source src="testfor web_vp8.webm" type="video/webm" />
    </video>



    <video id="testfor web" width="320" height="240" controls>
    <source src="rrr_pp_x264.mp4" type="video/mp4" />
    <source src="Room_Resource Reservation PP_libtheora.ogv" type="video/ogg" />
    <source src="Room_Resource Reservation PP_vp8.webm" type="video/webm" />
    </video>

    <br>
    <br>
    <br>
    <br>
    <br>
    <br>
    <br>

    </body>


    </head



    </html>

    Also, what is the html to add a text description to each video on my site?
    I have included a screen shot of the page. The text that you see in the screen shot is not from html. It's a screen shot of the web page, and then I added the text after with a screen capture program.
    Thank You.
    Attached Files
    Last edited by acenyc; 05-13-2016, 04:51 PM. Reason: additional information

  • #2
    Hi acenyc!

    As you guessed, using <br> tags to spaaace out the elements on the page is not the best way to control the layout. If you resize the window or look at the page in a different browser (or on a phone) you will often find that your layout, which you spent a long time trying to get just right, is now completely out of whack.

    The solution is to use CSS, which allows us to take each element - like a video - and give it various display properties. One of the properties we can use is "margin," which lets us specify a certain amount of blank spaaace on each side of an element. You will find this gives you much finer control over how your website looks!

    For starters, let's add some spacing above each video as you requested. As I said, we can use CSS for this, and we can do it by adding a <style> tag to your <head> (there are other ways, but this is the simplest to start out.) Here is what the first part of your HTML file will look like:

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
        <title>html video</title>
        <style type="text/css">
            video
            {
                margin-top: 200px;
            }
        </style>
    </head>
    
    
    <body>
    
    
    <H1 align="center">WELCOME TO THE ASCNYC INTRANET WEBSITE</H1>
    
    <!-- the rest of the file goes here just like you had it -->
    Notice a couple of things about the above code:
    - First of all, </head> needs to come before <body>. They are two separate things - the body doesn't go inside the head.
    - Second of all, let's look at what is happening in the <style> element.
    - type="text/css" tells the browser that CSS information is in the <style> tag. Most browsers are smart enough to figure that out anyway, but it's good practice to put it in.
    - Inside, we find "video", followed by a curly braces. This says to the browser "Apply the rules inside these curly braces to every <video> element."
    - Finally, inside the curly braces we find the one style rule: "margin-top: 200px;". This tells the browser to put blank spaaace above every <video> element and that that blank spaaace should be 200 pixels tall. You could adjust that number to get it to look exactly the way you want! This spaaace will take the place of all your <br> tags, so you could remove those.
    - This only scratches the surface of what CSS can do. There are hundreds of different rules we could apply if we wanted to - rules to put in borders, rules to give the background a different color, even rules to make the text appear upside down! And we don't have to stop with just applying to every element of a certain type, like <video>. We can use selectors, classes, and identifiers to apply rules to any element or group of elements we could want. If you're interested in learning more about CSS, I'd suggest starting here: http://www.w3schools.com/css/ .

    Now as for your other question, let's look at how we can get text to stick below the videos. In order to do that, we'll need to put both the video and the text inside a container element. This container element will be invisible, but we can use it to group the video and the text into one box, whose size and layout we can control with CSS. Code first, explanation to follow!

    HTML Code:
    <!DOCTYPE html>
    <html>
    <head>
        <title>html video</title>
        <style type="text/css">
            body
            {
                text-align: center;
            }
            .video-container
            {
                display: inline-block;
                width: 320px;
            }
            .video-container video
            {
                margin-top: 200px;
                width: 100%;
                height: 240px;
            }
        </style>
    </head>
    
    
    <body>
    
    
    <H1>WELCOME TO THE ASCNYC INTRANET WEBSITE</H1>
    
    <br>
    
    <H2>This site contains instructional videos that will assist you with accessing resources on the ASCNYC network</H2>
    <h2>Click the start button on the video that you want to view, then double click in the video itself to expand it to full screen.Then click the escape key or anywhere on the video to reduce it.</h2>
    
    <h3>If you have any suggestions for new videos, email the IT department at <a href="mailto:IT@ascnyc.org">IT@ascnyc.org</a>.</h3>
    
    <HR>
    <div class="video-container">
    <video id="rdweb.mp4" controls>
    <source src="rdweb_x264.mp4" type="video/mp4 " />
    <source src="rdweb_VP8.webm" type="video/webm" />
    <source src="rdweb_libtheora.ogv" type="video/ogg" />
    </video>
    This text is a description of the above video.
    </div>
    
    <div class="video-container">
    <video id="testfor web" controls>
    <source src="testfor web_x264.mp4" type="video/mp4" />
    <source src="testfor web_libtheora.ogv" type="video/ogg" />
    <source src="testfor web_vp8.webm" type="video/webm" />
    </video>
    This text is a description of the above video.
    </div>
    
    <br>
    
    <div class="video-container">
    <video id="testfor web" controls>
    <source src="testfor web_x264.mp4" type="video/mp4" />
    <source src="testfor web_libtheora.ogv" type="video/ogg" />
    <source src="testfor web_vp8.webm" type="video/webm" />
    </video>
    This text is a description of the above video.
    </div>
    
    <div class="video-container">
    <video id="testfor web" controls>
    <source src="rrr_pp_x264.mp4" type="video/mp4" />
    <source src="Room_Resource Reservation PP_libtheora.ogv" type="video/ogg" />
    <source src="Room_Resource Reservation PP_vp8.webm" type="video/webm" />
    </video>
    This text is a description of the above video.
    </div>
    
    </body>
    
    </html>
    The above code has several changes.
    - I removed align="center" from each <h1>, <h2>, and <h3> tag. Instead, I added a CSS rule "text-align: center;" that applies to all <body> elements (of which there is only one, of course.) Everything inside the <body> is now automatically center-aligned. This helps us get the videos positioned correctly without having to put them inside the <h3>.
    - Each <video> element is now inside a <div> element - the container I spoke of earlier. You may notice that each <div> has the attribute class="video-container". I'll explain why in a moment. For now, notice that the video's accompanying text is also in the <div>, so that we can group them together into one "box" that we can move around and control the size of.
    - Now let's look at the CSS in the <style> element.
    - I already mentioned the "text-align: center;" rule applied to the <body>.
    - After the closing curly brace that signals the end of the rules for <body>, the next set of rules is labeled ".video-container". The dot is important! With the dot, we are no longer saying "apply these rules to every element of type video-container" (there is no such type!) Instead we are saying "apply these rules to every element that has the class video-container." Classes serve as labels marking elements that we want to handle a certain way. By putting class="video-container" in every <div>, we now have a way of applying these rules to the <div>s that are serving as video containers but not to any other <div>s we might add later.
    - So, for each element that has the class "video-container", we are setting two rules. The first is "display: inline-block;". That rule basically tells the browser to allow the <div> elements to be next to each other; normally, each <div> is horsed to be on its own line. The second rule we set is "width: 320px;". Originally, you had set that width on your <video> elements. But we now need to set that width on the container element instead. This makes sure that the text we put below that video can't get longer than the video is wide (it will go down to the next line instead). If we hadn't set a width on the container, then it would grow as wide as the text we put inside it, and that would not look the way you showed in your picture.
    - After the rules for the class "video-container", we find that the next set of rules is labeled ".video-container video". Here the power of CSS selectors begins to show just a little bit. What we are saying here is "apply these rules to every <video> element that is inside another element with the class "video-container". We can apply rules to just the <video>s we want, without having to use another class.
    - There are three rules applied to ".video-container video". The first is the same margin-top rule from before. The second requires a little more explaining. By saying "width: 100%;", we are saying "make this element as wide as the width of the spaaace inside its container." How wide is that spaaace inside the container? Well, a couple lines above, we applied a rule to each container element - "width: 320px;". So the video inside will also be 320 pixels wide. If we later decide to change the width of the container, the width of the video can automatically grow to match! Of course, we could always change it to be "width: 320px;" and then it would stay 320 pixels wide no matter what we did to the container. And finally, we have a rule that sets the height of each video to 240 pixels. These last two rules together take the place of the width="320" and height="240" that you had put in each <video>. Using CSS, we can have just one copy of the width and height; if you later decide to change it, changing all of the videos at the same time will be easy - and you won't have to worry about forgetting one (trust me, it happens all the time.)

    As I said, this post only scratches the surface of what CSS can do for you. CSS is probably the easiest of all the web languages to learn (even easier than HTML) because it always follows the exact same structure. (That being said, it does have a few endearing little quirks!) I would highly suggest learning it, and if you have any specific questions, this forum is a wonderful place to get answers!

    P.S. Bonus tip: In your e-mail link, you need the email address to come immediately after the "mailto:" and inside the quotes - that's what makes the link work. Then your email appears a second time in the spot where you already had it (though any text can go there and the link works the same.) You'll notice that I've made that change already in my reply.
    Last edited by jansennerd10; 06-08-2016, 02:25 AM.

    Comment


    • scoutt
      scoutt commented
      Editing a comment
      Very nice write up, kudos
Working...
X