Responsive YouTube embeds

sass/custom/_paulus.scss

@@ -386,3 +386,21 @@ p.note {
     }
   }
 }
+
+// Responsive YouTube embeds.
+// https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
+.videoWrapper {
+  position: relative;
+  padding-bottom: 56.25%; /* 16:9 */
+  padding-top: 25px;
+  height: 0;
+  margin-bottom: 25px;
+
+  iframe {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}

source/_components/alexa.markdown

@@ -14,12 +14,11 @@ featured: false
 
 The Alexa component allows you to integrate Home Assistant into Alexa/Amazon Echo. This component will allow you to query information within Home Assistant by using your voice. There are no supported sentences out of the box as of now, you will have to define them all yourself. This component does not yet allow the control of devices connected to Home Assistant.
 
-<p style='text-align: center;'>
+<div class='videoWrapper'>
 <iframe width="560" height="315" src="https://www.youtube.com/embed/1Ke3mtWd_cQ" frameborder="0" allowfullscreen></iframe>
-</p>
+</div>
 
-
+### {% linkable_title Requirements before using %}
-### Requirements before using
 Amazon requires the endpoint of a skill to be hosted via SSL. Self-signed certificates are ok because our skills will only run in development mode. Read more on [our blog][blog-lets-encrypt] about how to set up encryption for Home Assistant. If you are unable to get https up and running, consider using [this AWS Lambda proxy for Alexa skills](https://forums.developer.amazon.com/forums/thread.jspa?messageID=18604).
 
 [blog-lets-encrypt]: https://home-assistant.io/blog/2015/12/13/setup-encryption-using-lets-encrypt/
@@ -36,7 +35,7 @@ To get started with Alexa skills:
      - https
      - https://YOUR_HOST/api/alexa?api_password=YOUR_API_PASSWORD
 
-### Configuring your Amazon Alexa skill
+### {% linkable_title Configuring your Amazon Alexa skill %}
 
 Alexa works based on intents. Each intent has a name and variable slots. For example, a `LocateIntent` with a slot that contains a `User`. Example intent schema:
 
@@ -75,7 +74,7 @@ This means that we can now ask Alexa things like:
  - Alexa, ask Home Assistant where Paul is
  - Alexa, ask Home Assistant where we are
 
-### Configuring Home Assistant
+### {% linkable_title Configuring Home Assistant %}
 
 Out of the box, the component will do nothing. You have to teach it about all intents you want it to answer to. The way it works is that the answer for each intent is based on [templates] that you define. Each template will have access to the existing states via the `states` variable but will also have access to all variables defined in the intent.
 

source/_posts/2015-12-06-community-highlights.markdown

@@ -17,7 +17,7 @@ First is the public beta of [Let's Encrypt](https://letsencrypt.org/). Let's Enc
 
 The next thing is a show-off of some of the cool stuff people do with Home Assistant. This is miniconfig talking to Home Assistant using the Amazon Echo!
 
-<div style='width: 560px; margin: 0 auto 16px;'>
+<div class='videoWrapper'>
 <iframe width="560" height="315" src="https://www.youtube.com/embed/9QQjklnSQKY" frameborder="0" allowfullscreen></iframe>
 </div>
 

source/_posts/2015-12-20-amazon-echo-icloud-and-templates.markdown

@@ -13,7 +13,9 @@ og_image: /images/blog/2015-12-release-10/alexa-fb.png
 
 Alrighty, it's time for Home Assistant 0.10. A lot amazing things have changed and sadly we also had to introduce a bunch of backwards incompatible changes. I would like to give a big shoutout to Philip Lundrigan ([@philipbl]) who put a lot in effort in helping the migration to move towards using templates for a wide variety of platforms.
 
-<center><iframe width="560" height="315" src="https://www.youtube.com/embed/1Ke3mtWd_cQ" frameborder="0" allowfullscreen></iframe></center>
+<div class='videoWrapper'>
+<iframe width="560" height="315" src="https://www.youtube.com/embed/1Ke3mtWd_cQ" frameborder="0" allowfullscreen></iframe>
+</div>
 
 <img src='/images/supported_brands/icloud.png' style='clear: right; border:none; box-shadow: none; float: right; margin-bottom: 16px;' width='150' /><img src='/images/supported_brands/heatmiser.png' style='clear: right; border:none; box-shadow: none; float: right; margin-bottom: 16px;' width='150' /><img src='/images/supported_brands/dweet.png' style='clear: right; border:none; box-shadow: none; float: right; margin-bottom: 16px;' width='150' /><img src='/images/supported_brands/amazon-echo.png' style='clear: right; border:none; box-shadow: none; float: right; margin-bottom: 16px;' width='150' /><img src='/images/supported_brands/eliq.png' style='clear: right; border:none; box-shadow: none; float: right; margin-bottom: 16px;' width='150' />