Fix video content

Author: beneliflo

css/app.css

@@ -2,7 +2,7 @@
 new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
 j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
 '//www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
-})(window,document,'script','dataLayer','GTM-PT2SNS');</script><!-- End Google Tag Manager —>--><nav class="navbar closed"><div class="container"><div class="top-mobile"><div class="menu-trigger"><span></span></div><a href="/" class="brand"><img src="/img/pic_logo.svg" class="icon"><img src="/img/logo.svg" class="logo"></a></div><nav class="menu"><a href="/#debugger" class="scrollto">Debugger</a><a href="/#libraries" class="scrollto">Libraries</a><a href="/introduction" class="active">Introduction</a><a href="https://ask.auth0.com/category/jwt" target="_blank">Ask</a><a href="http://swag.auth0.com/" target="_blank">Get a T-shirt!</a></nav><div class="social"><a href="https://auth0.com/" target="_blank" class="a0"><img src="/img/ico_a0_white.svg"></a><a href="https://twitter.com/auth0" target="_blank" class="twitter"><img src="/img/ico_twitter.svg"></a></div><a href="https://auth0.com/" target="_blank" class="supported">Supported by<img src="/img/ico_logo.svg"></a></div></nav><section class="banner-jwt"><div class="container"><a href="/" class="logo"><img src="/img/pic_logo.svg"></a><h1>Introduction to JSON Web Tokens</h1></div></section><iframe src="//fast.wistia.net/embed/iframe/dxfz716cw9" allowtransparency="true" frameborder="0" scrolling="no" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="640" height="400" class="intro-video wistia_embed"></iframe><script src="//fast.wistia.net/assets/external/E-v1.js" async></script><section class="plain-text"><div class="container"><h2 id="what-is-json-web-token-">What is JSON Web Token?</h2>
+})(window,document,'script','dataLayer','GTM-PT2SNS');</script><!-- End Google Tag Manager —>--><nav class="navbar closed"><div class="container"><div class="top-mobile"><div class="menu-trigger"><span></span></div><a href="/" class="brand"><img src="/img/pic_logo.svg" class="icon"><img src="/img/logo.svg" class="logo"></a></div><nav class="menu"><a href="/#debugger" class="scrollto">Debugger</a><a href="/#libraries" class="scrollto">Libraries</a><a href="/introduction" class="active">Introduction</a><a href="https://ask.auth0.com/category/jwt" target="_blank">Ask</a><a href="http://swag.auth0.com/" target="_blank">Get a T-shirt!</a></nav><div class="social"><a href="https://auth0.com/" target="_blank" class="a0"><img src="/img/ico_a0_white.svg"></a><a href="https://twitter.com/auth0" target="_blank" class="twitter"><img src="/img/ico_twitter.svg"></a></div><a href="https://auth0.com/" target="_blank" class="supported">Supported by<img src="/img/ico_logo.svg"></a></div></nav><section class="banner-jwt"><div class="container"><a href="/" class="logo"><img src="/img/pic_logo.svg"></a><h1>Introduction to JSON Web Tokens</h1></div></section><section class="video-content"><div class="container"><iframe src="//fast.wistia.net/embed/iframe/dxfz716cw9?videoFoam=true&amp;controlsVisibleOnLoad=false&amp;vmode=transparent&amp;preload=metadata&amp;playerColor=292929" allowtransparency="true" frameborder="0" scrolling="no" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen class="intro-video wistia_embed"></iframe></div></section><section class="plain-text"><div class="container"><h2 id="what-is-json-web-token-">What is JSON Web Token?</h2>
 <p>JSON Web Token (JWT) is an open standard (<a href="https://tools.ietf.org/html/rfc7519">RFC 7519</a>) that defines a compact and self-contained way for securely transmitting information between parties as a JSON object. This information can be verified and trusted because it is digitally signed. JWTs can be signed using a secret (with <strong>HMAC</strong> algorithm) or a public/private key pair using <strong>RSA</strong>.</p>
 <p>Let&#39;s explain some concepts of this definition further.</p>
 <ul>
@@ -91,7 +91,7 @@ <h2 id="why-should-we-use-json-web-tokens-">Why should we use JSON Web Tokens?</
 <em>Comparison of the length of an encoded JWT and an encoded SAML</em></p>
 <p>If you want to read more about JSON Web Tokens and even start using them to perform authentication in your own applications, browse to the <a href="http://auth0.com/learn/json-web-tokens">JSON Web Token landing page</a> in Auth0.</p>
 </div></section><section class="go-tool"><div class="container"><p>Get started with JWT today</p><a href="/#debugger" class="btn btn-success">Start using the tool</a></div></section><div class="tokens-created"><div class="container"><img src="/img/pic_logo_ft.svg"><p>JWT.io is brought to you by Auth0.</p><p>A cloud service, APIs and tools that eliminate the friction of identity for your applications and APIs.</p><a href="https://auth0.com/signup" target="_blank" class="btn btn-success">Create free account</a><div class="token"><h5>TOKENS CREATED</h5></div><div class="counter"></div></div></div><footer><div class="container"><div class="columns"><div class="column"><a href="https://auth0.com/" target="_blank">Supported by<img src="/img/ico_logo.svg"></a></div><div class="column pull-request"><span>Missing something?</span><a href="https://github.com/jsonwebtoken/jsonwebtoken.github.io/tree/master/views" target="_blank">Send a Pull Request</a></div><div class="column social-counter"><a href="https://twitter.com/auth0" data-show-count="true" class="twitter-follow-button">Follow @auth0</a></div></div></div></footer><!--Bootstrap core JavaScript
-==================================================--><!-- Placed at the end of the document so the pages load faster--><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="/js/bootstrap.min.js"></script><!-- build:js dist/js/app.js--><script src="/vendor/zepto/zepto.js"></script><script src="/vendor/jsonlint/lib/jsonlint.js"></script><script src="/vendor/json-sans-eval-min/index.js"></script><script src="/vendor/codemirror/lib/codemirror.js"></script><script src="/vendor/codemirror/mode/javascript/javascript.js"></script><script src="/vendor/codemirror/addon/lint/lint.js"></script><script src="/vendor/codemirror/addon/lint/javascript-lint.js"></script><script src="/vendor/codemirror/addon/lint/json-lint.js"></script><script src="/vendor/jsrsasign/index.js"></script><script src="/vendor/jws.js/index.js"></script><script src="/js/jwt_mode.js"></script><script src="/js/jwt.js"></script><script src="/js/isotope.pkgd.min.js"></script><script src="/js/flipclock.js"></script><script src="/js/accordion.js"></script><script src="/js/highlight.min.js"></script><script src="/js/app.js"></script><!-- endbuild--><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+==================================================--><!-- Placed at the end of the document so the pages load faster--><script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script><script src="/js/bootstrap.min.js"></script><script src="//fast.wistia.net/assets/external/E-v1.js" async></script><!-- build:js dist/js/app.js--><script src="/vendor/zepto/zepto.js"></script><script src="/vendor/jsonlint/lib/jsonlint.js"></script><script src="/vendor/json-sans-eval-min/index.js"></script><script src="/vendor/codemirror/lib/codemirror.js"></script><script src="/vendor/codemirror/mode/javascript/javascript.js"></script><script src="/vendor/codemirror/addon/lint/lint.js"></script><script src="/vendor/codemirror/addon/lint/javascript-lint.js"></script><script src="/vendor/codemirror/addon/lint/json-lint.js"></script><script src="/vendor/jsrsasign/index.js"></script><script src="/vendor/jws.js/index.js"></script><script src="/js/jwt_mode.js"></script><script src="/js/jwt.js"></script><script src="/js/isotope.pkgd.min.js"></script><script src="/js/flipclock.js"></script><script src="/js/accordion.js"></script><script src="/js/highlight.min.js"></script><script src="/js/app.js"></script><!-- endbuild--><script>(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
 (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
 m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
 })(window,document,'script','//www.google-analytics.com/analytics.js','ga');

index.html

@@ -935,6 +935,20 @@ body
 
 // plain-text
 
+.video-content
+  padding-bottom 0
+
+  .container
+    max-width 630px
+
+  .intro-video
+    width 100%
+    margin 0 auto
+    display block
+    +breakpoint("tablet")
+      width 600px
+      height 375px
+
 .plain-text
   .container
     max-width 630px
@@ -1064,12 +1078,6 @@ body
     border none
     border-radius 0
 
-// intro-video
-
-.intro-video
-  margin 30px auto
-  display block
-
 // go-tool
 
 .go-tool

introduction/index.html

@@ -61,8 +61,9 @@ block content
 
       h1 Introduction to JSON Web Tokens
 
-  iframe.intro-video(src="//fast.wistia.net/embed/iframe/dxfz716cw9" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen width="640" height="400")
-  script(src="//fast.wistia.net/assets/external/E-v1.js" async)
+  section.video-content
+    .container
+      iframe.intro-video(src="//fast.wistia.net/embed/iframe/dxfz716cw9?videoFoam=true&controlsVisibleOnLoad=false&vmode=transparent&preload=metadata&playerColor=292929" allowtransparency="true" frameborder="0" scrolling="no" class="wistia_embed" name="wistia_embed" allowfullscreen mozallowfullscreen webkitallowfullscreen oallowfullscreen msallowfullscreen)
 
   section.plain-text
     .container

stylus/app.styl

@@ -119,6 +119,9 @@ html(lang='en')
     // Placed at the end of the document so the pages load faster
     script(src='//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js')
     script(src='/js/bootstrap.min.js')
+
+    script(src="//fast.wistia.net/assets/external/E-v1.js" async)
+
     // build:js dist/js/app.js
     script(src='/vendor/zepto/zepto.js')
     script(src='/vendor/jsonlint/lib/jsonlint.js')