These examples show you how to do responsive video both HTML 5 based and embedded video from YouTube (can work with video embedded from other sites). All of the HTML and CSS on this page is based on the good work done by Thierry Koblentz and Chris Coyier. See the HTML for links to their work.
A Pen by chris0stein on CodePen.
| <section> | |
| <div class="grid"> | |
| <img src="thumbs/mobile-tb.png" alt="picture of entire page at mobile size "> | |
| </div> | |
| <div class="grid"> | |
| <img src="thumbs/tablet-tb.png" alt=" picture of entire page at tablet size"> | |
| </div> | |
| <div class="grid"> | |
| <img src="thumbs/desktop-tb.png" alt="picture of entire page at desktop size"> | |
| </div> |
| // ---- | |
| // Sass (v3.3.14) | |
| // Compass (v1.0.1) | |
| // ---- | |
| //through goes from the first number through (including) last number | |
| @for $i from 1 through 3 { | |
| .for-through { | |
| i: $i; | |
| } |
| // ---- | |
| // Sass (v3.4.4) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // map in a map | |
| $buttons: ( | |
| search : ( |
| // ---- | |
| // Sass (v3.3.14) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // Maps of buttons | |
| $buttons: ( | |
| search: ( | |
| background: 22, | |
| icon: "magnifier.svg" |
| // ---- | |
| // Sass (v3.3.14) | |
| // Compass (v1.0.1) | |
| // ---- | |
| //functions | |
| // ---- | |
| // Sass (v3.3.14) | |
| // Compass (v1.0.1) |
| // ---- | |
| // Sass (v3.3.14) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // Maps of buttons | |
| //this is a map inside of a map | |
| $buttons: ( | |
| search: ( | |
| background: blue |
| // ---- | |
| // Sass (v3.4.4) | |
| // Compass (v1.0.1) | |
| // ---- | |
| //list | |
| //$list: "sass" 4 "life"; | |
| $list: "blue" "red" "green"; | |
| //maps |
| // ---- | |
| // Sass (v3.3.14) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // Example error in a function | |
| @function double-width($num) { | |
| @if (type-of($num) == number) { | |
| @return $num * 2; | |
| } @else { |
| // ---- | |
| // Sass (v3.3.14) | |
| // Compass (v1.0.1) | |
| // ---- | |
| // Simple warn | |
| @warn "Hmmm, something went wrong."; | |
| // Warn with conditional | |
| $var: true; |