Merge pull request #165 from Shopify/iframe-sizing

Responsive iframes for youtube and vimeo
Shopify · Aug 4, 2014 · 015dc42 · 015dc42
2 parents e8a756c + 4920d5b
commit 015dc42
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 2 deletions.
diff --git a/assets/shop.js.liquid b/assets/shop.js.liquid
@@ -20,6 +20,7 @@ timber.init = function () {
   timber.cacheSelectors();
   timber.accessibleNav();
   timber.productImageSwitch();
+  timber.responsiveVideos();
 }
 
 timber.accessibleNav = function () {
@@ -115,5 +116,10 @@ timber.productImageSwitch = function () {
   });
 }
 
+timber.responsiveVideos = function () {
+  $('iframe[src*="youtube.com/embed"').wrap('<div class="video-wrapper"></div>');
+  $('iframe[src*="player.vimeo"').wrap('<div class="video-wrapper"></div>');
+}
+
 // Initialize Timber's JS on docready
 $(timber.init)
diff --git a/assets/timber.scss.liquid b/assets/timber.scss.liquid
@@ -1,5 +1,5 @@
 /*============================================================================
-  Shopify Timber v1.3.1
+  Shopify Timber v1.3.2
   Copyright 2014 Shopify Inc.
   Author Carson Shold @cshold
   Built with Sass - http://sass-lang.com/
@@ -1180,10 +1180,31 @@ svg:not(:root) {
 }
 
 img.auto,
-.grid-item img,
+.grid-item img {
+  max-width: 100%;
+  max-height: 100%;
+  height: auto;
+}
+
 .grid-item iframe {
   max-width: 100%;
+}
+
+.video-wrapper {
+  position: relative;
+  overflow: hidden;
+  max-width: 100%;
+  padding-bottom: 56.25%;
+  height: 0;
   height: auto;
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
 }