Skip to main content

Posts

Showing posts from May, 2014

YouTube (or other iframe) video responsive

How to make a YouTube (or other iframe) video responsive Adding videos to your responsive website can cause many issues with how the site responds to different screen sizes.  iframes are by default a fixed size.  By adding a few lines of CSS to your style sheet and wrapping the iframe embed code in a little bit of HTML you can make your video responsive.   Step 1 : Add this section of code to your CSS file. <style type="text/css">         .video-container {             position: relative;             padding-bottom: 56.25%;             padding-top: 30px;             height: 0;             overflow: hidden;         }             .video-container iframe,             .video-container object,             .video-container embed {                 position: absolute;                 top: 0;                 left: 0;                 width: 100%;                 height: 100%;             }     </style> Step2:  Wrap the iframe