Skip to content

Instantly share code, notes, and snippets.

@joalbertg

joalbertg/index.html

Created April 29, 2017 12:23
Show Gist options
  • Save joalbertg/b09a17f878f8b96ae413f0e9451880d0 to your computer and use it in GitHub Desktop.
Save joalbertg/b09a17f878f8b96ae413f0e9451880d0 to your computer and use it in GitHub Desktop.
Download ZIP
Mixin para video responsive - sass
Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Video responsive</title>
<link rel="stylesheet" type="text/css" href="css/ratio.css">
</head>
<body>
<div class="video">
<iframe width="560" height="315" src="https://www.youtube.com/embed/PRV_0NAK9SI" frameborder="0" allowfullscreen></iframe>
</div>
</body>
</html>
Raw
ratio.css
.video {
height: 0;
overflow: hidden;
width: 100%;
padding-bottom: 56.25%;
position: relative; }
.video iframe,
.video video,
.video object {
position: absolute;
width: 100%;
height: 100%; }
/*# sourceMappingURL=ratio.css.map */
Raw
ratio.sass
@mixin ratio($width, $height)
height: 0
overflow: hidden
width: 100%
padding-bottom: percentage( $height / $width )
.video
@include ratio(16, 9)
position: relative
iframe,
video,
object
position: absolute
width: 100%
height: 100%
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment