| // ---- | |
| // 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; | |
| } |
| <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> |
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.