Last active
August 29, 2015 14:06
-
-
Save thomd/220a20767617953f942a to your computer and use it in GitHub Desktop.
Responsive WebDesign - Elastic Video
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css"> | |
| <link rel="stylesheet" href="./style.css"> | |
| <title>elastic video</title> | |
| </head> | |
| <body> | |
| <div class="container-fluid"> | |
| <!-- Iframe embedded video with elastic width --> | |
| <div class="video-container"> | |
| <iframe src="//player.vimeo.com/video/48858289" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> | |
| </div> | |
| <!-- Iframe embedded elastic video with fixed upper width --> | |
| <div class="video-wrapper"> | |
| <div class="video-container"> | |
| <iframe src="//player.vimeo.com/video/48858289" width="500" height="281" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe> | |
| </div> | |
| </div> | |
| <!-- elastic video --> | |
| <video class="video-responsive" src="http://av.vimeo.com/41472/810/115954041.mp4?token2=1410863665_2d099606ce5e0384b653c85d601d7fb8"></vieo> | |
| </div> | |
| </body> | |
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .video-container { | |
| position: relative; | |
| padding-bottom: 56.2%; | |
| height: 0; | |
| overflow: hidden; | |
| } | |
| .video-container iframe, .video-container object, .video-container embed { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| .video-wrapper { | |
| width: 600px; | |
| max-width: 100%; | |
| margin: auto; | |
| } | |
| .video-responsive { | |
| width: 100%; | |
| height: auto; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| $iframe-height: 281 | |
| $iframe-width: 500 | |
| .video-container | |
| position: relative | |
| padding-bottom: percentage( $iframe-height / $iframe-width ) | |
| height: 0 | |
| overflow: hidden | |
| & iframe, & object, & embed | |
| position: absolute | |
| top: 0 | |
| left: 0 | |
| width: 100% | |
| height: 100% | |
| .video-wrapper | |
| width: 600px | |
| max-width: 100% | |
| margin: auto | |
| .video-responsive | |
| width: 100% | |
| height: auto |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment