Responsive Vimeo

You've finally launched your awesome website. It's all shiny with HTML, CSS3, and a responsive layout that looks perfect on all devices until you embed a Vimeo video.

Urgh, that video isn't responsive. So you spend your time fixing the code over and over again just to then ruin your layout?!

Check out the solution below:


                    /*Video Responsive Settings*/
                    .video-container{
                        width: 100%;
                        max-width: 800px;
                        margin: 0 auto; 
                      }
                      .video-responsive{
                          overflow:hidden;
                          padding-bottom:56.25%;
                          position:relative;
                          height:0;
                      }
                      .video-responsive iframe{
                          left:0;
                          top:0;
                          height:100%;
                          width:100%;
                          position:absolute;
                      }
                      /*End of Video Responsive Settings*