Announcement

Collapse
No announcement yet.

Embed video content in responsive design

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

  • Embed video content in responsive design

    Hello all.
    Time for a new webdesign question for you professionals.
    On my website I want to embed a number of my own Vimeo videos. The trouble is that I use a responsive web design, so naturally I want my videos to look good on any size screen.
    Some tutorial 'told' me that in the HTML code I have to use the following lines:

    <div>
    <iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen="" frameborder="0">
    </iframe>
    </div>

    The tutorial also stated that I will have to put some code in my stylesheet. They mentioned this codes:

    .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 35px;
    height: 0;
    overflow: hidden;
    }

    .video-container iframe {
    position: absolute;
    top:0;
    left: 0;
    width: 100%;
    height: 100%;
    }

    The two questions I have are:
    - is it really necessary to put both code blocks in the stylesheet?
    - and even more imprtant: where exactly do I put the code or codes in the stylesheet?

    I have enclosed the stylesheet I use.
    I sincerely hope one of you can help me out.
    And as always: thank you in advance for your help/advice/tips & tricks.
    Sincerely, Jos Rosier, the Netherlands

    Attached Files

  • #2
    The two codes are different. One covers the video container and the other controls the iframe. Both are needed. And you can put the code anywhere in the stylesheet and it will be read. I would also change your <div> to <div class="video-container">.
    Cat-herder Extraordinaire

    Comment


    • #3
      Hi there Rosier,

      code is required for both the parent container and the child.

      The CSS may be placed anywhere suitable in your CSS file.

      Here is an example for you to try....

      Code:
      
      <!DOCTYPE html>
      <html lang="en">
      <head>
      
      <meta charset="utf-8">
      <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
      
      <title>untitled document</title>
      
      <link rel="stylesheet" href="screen.css" media="screen">
      
      <style media="screen">
      body {
          background: #f0f0f0;
       }
      .video-container {
          position: relative;
          width: 60%;
      
      /* aspect ratio of the embed is 315/560 which equals 56.25% */
      /* padding-top value is width*56.25%/100 */
      
          padding-top: 33.75%;
          margin: 1em auto;
          box-shadow: 0.5em 0.5em 0.5em #999;
       }
      
      .video-container iframe {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          border:0;
       }
      </style>
      
      </head>
      <body>
      
      <div class="video-container">
       <iframe src="http://www.youtube.com/embed/4aQwT3n2c1Q" height="315" width="560" allowfullscreen></iframe>
      </div>
      
      </body>
      </html>
      




      ~ the original bald headed old fart ~

      Comment


      • #4
        Thanks, Pegasus, for your fast reply. I will try it all and will let you know if it works or if I need any more help. Greetz,.

        Comment


        • #5
          And also thank you Coothead... you guys are so helpful. Great. So I am going to give it a try. Keep y'all posted!

          Comment


          • #6
            Hello Pegasus and Coothead. As promised I would get back 2 u with 'the results'. The codes work great, responsive also great. Just two more small question. If I look at the film on a large screen desktop computer, there is a lot of black space above and below the video. Is there a way to fix that? And the other thing: the video is placed in the centre of the web screen and I would love to position it on the left side (as is everything on my website). How do I do that?
            Thanks again for the help!

            Comment


            • #7
              Hi there Rosier,

              If I look at the film on a large screen desktop computer, there is a lot of black space above and below the video.
              Is there a way to fix that?
              I do not see any space on any of my test browsers.
              On which of your browsers does this happen for you?

              And the other thing: the video is placed in the centre of the web screen and I would love to position it on the left side (as is everything on my website).
              How do I do that?
              Change this...
              Code:
              
              .video-container {
                  position: relative;
                  width: 60%;
              
              /* aspect ratio of the embed is 315/560 which equals 56.25% */
              /* padding-top value is width*56.25%/100 */
              
                  padding-top: 33.75%;
                  margin: 1em auto;
                  box-shadow: 0.5em 0.5em 0.5em #999;
               }
              
              ...to this...
              Code:
              
              .video-container {
                  position: relative;
                  width: 60%;
              
              /* aspect ratio of the embed is 315/560 which equals 56.25% */
              /* padding-top value is width*56.25%/100 */
              
                  padding-top: 33.75%;
                  margin: 1em 0;
                  box-shadow: 0.5em 0.5em 0.5em #999;
               }
              


              ~ the original bald headed old fart ~

              Comment


              • #8
                Hello Coothead. Just another video question if I may. What if I decide to host the videos myself on my responsive website (plenty of room) instead of using the embed option? I think I need a video player 'installed' with codes for responsive viewing. How do I do that in the HTML code as well as in the stylesheet? Thanks again for helping out!!!

                Comment


                • #9
                  Hi there Rosier,

                  HTML5 has it's own "video element".

                  Here is a basic responsive example...

                  Code:
                  
                  <!DOCTYPE html>
                  <html lang="en">
                  <head>
                  
                  <meta charset="utf-8">
                  <meta name="viewport" content="width=device-width,height=device-height,initial-scale=1">
                  
                  <title>HTML% video element</title>
                  
                  <style media="screen">
                  body {
                      background: #f0f0f0;
                   }
                  #player{
                      display: block;
                      width: 60%;
                      margin: 1em auto;
                      box-shadow: 0.5em 0.5em 0.5em #999;
                   }
                  </style>
                  
                  </head>
                  <body>
                  
                   <video id="player" controls >
                    <source src="http://coothead.co.uk/videos/QuentinSommerville.mp4" type="video/mp4">
                   </video>
                  
                  </body>
                  </html>
                  
                  As you can see the coding is very simple.



                  ~ the original bald headed old fart ~

                  Comment


                  • #10
                    Thanks again Coothead, I will try this one out this week!

                    Comment


                    • #11
                      Hi there Coothead. Tried it and I believe it works!
                      This is what I did:

                      <style media="screen">
                      body {
                      background: #000000;
                      }
                      #player{
                      display: block;
                      width: 60%;
                      margin: 1em 0;
                      box-shadow: 0.5em 0.5em 0.5em #999;
                      }
                      </style>

                      and ofcourse this piece of code:

                      <div class="content">
                      <p>
                      <br> <video id="player" controls >
                      <source src="testfilm.mp4" type="video/mp4">
                      </video>

                      See any flaws?

                      Comment


                      • #12
                        Hi there Rosier,
                        See any flaws?
                        Well, yes I can.

                        Code:
                        
                        <div class="content">
                        <p>
                        <br><video id="player" controls >
                        
                        This is poor coding.

                        Instead you should apply CSS "padding-top" to the video's parent element.


                        ~ the original bald headed old fart ~

                        Comment


                        • #13
                          Oops, thanks. What is padding-top?

                          Comment


                          • #14
                            Hi there Rosier,

                            What is padding-top?
                            The following links will help to update your knowledge bank.

                            1. CSS Box Model
                            2. CSS padding


                            ~ the original bald headed old fart ~

                            Comment


                            • #15
                              Ah, that's much too complex for me. Really don't know what to do with it. But thanks.

                              Comment

                              Working...
                              X