Creating an Animated CSS Transition for a YouTube Video

Exercise Preview

Exercise Overview

In this exercise you’ll add a YouTube video that enlarges when you mouse over it. You’ll use a CSS transition so it enlarges smoothly, with no JavaScript required!

1. If you completed the previous exercise, index.html should still be open in your code editor, and you can skip the following sidebar. If you closed index.html, re-open it now. We recommend you finish the previous exercise (1A) before starting this one. If you haven’t finished it, do the following sidebar.

   If You Did Not Do the Previous Exercise (1A)

   1. Close any files you may have open.
   2. On the Desktop, go to Class Files > Responsive CSS3 Scrolling Effects.
   3. Delete the Hawaii folder if it exists.
   4. Duplicate the Hawaii Photos & Text Done folder.
   5. Rename it to Hawaii and if possible, open it in your code editor.

Positioning & Sizing the YouTube Video

1. In index.html, around line 107 add the following bold code to create a home for the YouTube video:

   <p>
      Hawaii's tallest mountain, Mauna Kea, stands at 13,796 feet but is taller than Mount Everest if followed to the base of the mountain, which, lying at the floor of the Pacific Ocean, rises about 33,500 feet.
   </p>
   <div class="zoom">
      <div class="video-wrap">
   
      </div>
   </div>
   <p>
      The eight main islands, Hawai'i, Maui, O'ahu, Kaho'olawe, Lana'i, Moloka'i, Kaua'i and Ni'ihau are accompanied by many others.
   

2. Save the file.

3. Open style.css (in the css folder).

4. Scroll down to the very bottom of the file and add the following style:

   .zoom {
      float: right;
      width: 40%;
      margin: 7px 20px 15px 7px;
      padding: 5px;
      border: 1px solid #000;
   }
   

5. Save the file and reload the browser.

   Scroll down until you see the small, empty rectangle, the video’s future home. We won’t need the border and padding for the final design but it’s helpful to have them here to gauge the size and positioning of the video wrapper as you work. Try changing the proportions of the browser window and see how the video div resizes automatically to occupy 40% of the browser’s width.

   It’s pretty easy to tell a div to resize to a certain percentage of a browser’s width, like we just did. Unfortunately, it will be trickier to make the box’s height resize in proportion to the browser window while maintaining the video’s 16:9 aspect ratio—this is because there is no height unit that will take into account the page’s width.

   The solution to getting the box to resize in height proportionally as we change the page’s width is to use some percentage-based padding to hold the box open! Percentage-based padding will use the width of the box as the value of its percentage. Let’s add that now.

6. Return to style.css in your code editor.

7. At the very bottom of the file add the following style:

   .video-wrap {
      padding-top: 56.25%;
   }
   

   This means that whatever the width of the box, we want the height to be 56.25% of that width. How did we come up with that number? The aspect ratio of the video is 16:9, and 9/16 = 56.25%.

8. Save the file and reload the browser.

   While looking at the video box (towards the bottom of the page), try changing the proportions of the browser window. This is perfect! The box maintains the 16:9 aspect ratio as it resizes.

9. Return to your code editor.

10. Open Hawaii > snippets > youtube-iframe.html This is the standard embed code that YouTube gives you when you click on Share. This will allow us to embed their video into our page.

11. Select all the code in the file.

12. Copy the code.

13. Close youtube-iframe.html.

14. Switch to index.html in your code editor.

15. Paste the code you just copied into the video-wrap div (around line 109):

    <div class="zoom">
       <div class="video-wrap">
          <iframe width="560" height="315" src="https://www.youtube.com/embed/G0K9Ht0N_as?rel=0" frameborder="0" allowfullscreen></iframe>
       </div>
    </div>
    

16. Save the file and reload the browser.

    The YouTube video is appearing on the page, but it still needs some work. We need to position the video over the padding in the box, and make sure that the width and height of the video corresponds to the size of the box. Let’s use absolute positioning to get it where we want it!

17. Switch to style.css in your code editor.

18. Towards the bottom of the file, add the following code shown in bold:

    .video-wrap {
       padding-top: 56.25%;
       position: relative;
    }
    

    We’re going to use absolute positioning to position the iframe inside our .video-wrap. Therefore we need to declare a position (relative or absolute) on the nearest parent element that we wish to use as a positioning anchor. If we don’t declare a position on the nearest relative parent (in this case the .video-wrap), the body tag will be used as the positioning anchor. Now the iframe inside the wrapper can use absolute positioning relative to the wrapper itself.

19. At the very bottom of the document, add a rule for the iframe that’ll hold the video:

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

    This style specifies that the iframe (which is a child of the .video-wrap) is using absolute positioning to be placed in the upper left corner of the wrapper.

20. Save the file and reload the browser.

    Looking excellent! The YouTube video should be sitting over the top of the padding. Even better, since we told it to take up 100% of the width and height of the available space, it should resize perfectly if you play around with changing the proportions and size of the browser window. Now we have a fully responsive, easily resizing video.

21. Return to style.css in your code editor.

22. We no longer need the border and padding on the rule for the zoom div, so delete those two properties. When you’re done, the rule for .zoom should read as follows:

    .zoom {
       float: right;
       width: 40%;
       margin: 7px 20px 15px 7px;
    }
    

Adding an Animated CSS Transition on Hover

1. We also want our video to actually zoom when a visitor hovers over it! Let’s make that style now. Add the following code below the zoom rule (which starts around line 134), as shown below:

   .zoom:hover {
      width: 100%;
      margin: 15px 0;
   }
   

   This new class ensures that when a visitor mouses over (hovers over) the video, it will expand to be 100% of the width of the browser.

2. Save the file and reload the browser. Great! Our hover style should be working! However, it is rather jumpy as it switches from occupying 40% to 100% of the browser’s width. Let’s add an animation that makes this move less jerky.

3. Return to style.css in your code editor.

4. Let’s implement another cool new CSS3 feature: the ability to animate transitions between two states. We can specify that whenever any property in our zoom class undergoes a change, that change should be animated. Add the following bold code:

   .zoom {
      float: right;
      width: 40%;
      margin: 7px 20px 15px 7px;
      transition: all 0.4s ease-in-out;
   }
   

   This rule says to transition all of the properties (in our case, that will include changes to the width and margins) over the course of 0.4 seconds. The ease-in-out option slows the animation at the beginning and end.

5. The transition property works in modern browsers, but not in some older browsers (such as the older Android Browser). We can add a -webkit vendor prefixed version to make it function in more browsers. Copy the line of code you just wrote and paste a copy as shown below:

   .zoom {
      float: right;
      width: 40%;
      margin: 7px 20px 15px 7px;
      transition: all 0.4s ease-in-out;
      transition: all 0.4s ease-in-out;
   }
   

6. Add the -webkit vendor prefix to the first one, as shown below in bold:

   -webkit-transition: all 0.4s ease-in-out;
   transition: all 0.4s ease-in-out;
   

   NOTE: The unprefixed property (the official CSS that all browsers should use) always goes after the prefixed properties. How long you include a -webkit vendor prefixed version of this property will depend on how long you want to support older browsers. For info about browser support refer to caniuse.com/#feat=css-transitions

7. Save the file and preview index.html in the web browser. Try hovering over the video to see its amazing CSS3-powered zoom animation! How incredible that we can make this animation just using CSS, no Flash or JavaScript required.