diff --git a/assets/shop.js.liquid b/assets/shop.js.liquid index 8379f2e0d..a13358197 100755 --- 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('
'); + $('iframe[src*="player.vimeo"').wrap('
'); +} + // Initialize Timber's JS on docready $(timber.init) diff --git a/assets/timber.scss.liquid b/assets/timber.scss.liquid index ffa279159..61cdfab45 100755 --- 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%; + } }