mirror of
https://github.com/home-assistant/home-assistant.io.git
synced 2025-07-20 15:56:51 +00:00
Do not load youtube iframes until interaction (#22389)
This commit is contained in:
Paulus Schoutsen
GitHub
parent
9e49f44a7e
commit
7711befae0
@ -536,6 +536,22 @@ div.note {
|
||||
}
|
||||
}
|
||||
|
||||
lite-youtube {
|
||||
position: relative;
|
||||
display: block;
|
||||
padding-bottom: calc(100% / (16 / 9));
|
||||
background-color: rgba(0,0,0,.1);
|
||||
}
|
||||
|
||||
lite-youtube::before {
|
||||
content: attr(videotitle) " video placeholder";
|
||||
color: rgba(0, 0, 0, 0.82);
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
padding-top: calc(45% / (16 / 9));
|
||||
}
|
||||
|
||||
// Responsive YouTube embeds.
|
||||
// https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php
|
||||
.videoWrapper {
|
||||
|
||||
@ -5,7 +5,9 @@ g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js
|
||||
s.parentNode.insertBefore(g,s)}(document,'script'));
|
||||
</script>
|
||||
|
||||
<script src="{{ '/javascripts/prism.js' | cache_buster }}" type="text/javascript"></script>
|
||||
<script type="module" src="https://cdn.jsdelivr.net/npm/@justinribeiro/lite-youtube@1.3.1/lite-youtube.js"></script>
|
||||
|
||||
<script src="{{ '/javascripts/prism.js' | cache_buster }}" type="text/javascript" defer></script>
|
||||
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.css" />
|
||||
<script type="text/javascript" src="https://cdn.jsdelivr.net/docsearch.js/2/docsearch.min.js"></script>
|
||||
|
||||
@ -11,9 +11,7 @@ ha_domain: alexa
|
||||
|
||||
The built-in Alexa integration allows you to integrate Home Assistant into Alexa/Amazon Echo. This integration will allow you to query information and call services within Home Assistant by using your voice. Home Assistant offers no built-in sentences but offers a framework for you to define your own.
|
||||
|
||||
<div class='videoWrapper'>
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/1Ke3mtWd_cQ" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<lite-youtube videoid="1Ke3mtWd_cQ" videotitle="Home Assistant integration for Amazon Echo" posterquality="maxresdefault"></lite-youtube>
|
||||
|
||||
### Requirements
|
||||
|
||||
@ -29,7 +27,7 @@ The built-in Alexa integration allows you to integrate Home Assistant into Alexa
|
||||
- Model to add: Custom
|
||||
- Name: HomeAssistantIntentsSkill (or whatever you want to call this skill)
|
||||
- Method to host: Provision your own
|
||||
|
||||
|
||||
You can use this [specially sized Home Assistant logo][large-icon] as the large icon and [this one][small-icon] as the small one.
|
||||
|
||||
### Create Your Lambda Function
|
||||
@ -78,7 +76,7 @@ Next you need to create a Lambda function.
|
||||
- DEBUG *(optional)*: set to *True* to log debugging messages.
|
||||
- LONG_LIVED_ACCESS_TOKEN *(optional, not recommended)*: you will connect your Alexa Custom skill with your Home Assistant user account in the later steps, so that you don't need to use long-lived access token here. However, the access token you got from login flow is only valid for 30 minutes. It will be hard for you to test lambda function with the access token in test data. So for your convenience, you can remove the access token from the test data, [generate a long-lived access token][generate-long-lived-access-token] to put here, then the function will fall back to reading the token from environment variables. (tips: You did not enable the security storage for your environment variables, so your token saved here is not that safe. You should only use it for debugging and testing purpose. You should remove and delete the long-lived access token after you finish the debugging.)
|
||||
- Save your environmental variables by clicking the `Save` button.
|
||||
- Next, copy the ARN displayed at the top of the page, which is the identity of this Lambda function.
|
||||
- Next, copy the ARN displayed at the top of the page, which is the identity of this Lambda function.
|
||||
- Go back to your Alexa skill and go to the Custom->Endpoint menu option on the left.
|
||||
- Paste the ARN value in the "Default Region". Note: you will not be able to do this until you have completed the step above adding the Alexa Skills Kit trigger (done in the previous step) to the AWS Lambda Function.
|
||||
|
||||
|
||||
@ -46,9 +46,7 @@ The Nest Smart Device Management (SDM) API **requires a US$5 fee**.
|
||||
|
||||
## Video Walkthrough
|
||||
|
||||
<div class='videoWrapper'>
|
||||
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/wghcd9xDdMs" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<lite-youtube videoid="wghcd9xDdMs" videotitle="EASIER NEST INTEGRATION in Home Assistant! No More SSH or SSL validation!" posterquality="maxresdefault"></lite-youtube>
|
||||
|
||||
## Device Access Registration
|
||||
|
||||
@ -476,7 +474,7 @@ This feature is enabled by the following permissions:
|
||||
- This most likely reason is the *OAuth Consent Screen* is set to *Testing* by default which expires the token after 7 days.
|
||||
- Follow the steps above to set it to *Production* to resolve this and reauthorize your integration one more time to get a new token.
|
||||
- You may also see this as the error message *invalid_grant: Token has been expired or revoked*.
|
||||
- See [Google Identity: Refresh token expiration](https://developers.google.com/identity/protocols/oauth2#expiration) for more reasons on why your token may have expired.
|
||||
- See [Google Identity: Refresh token expiration](https://developers.google.com/identity/protocols/oauth2#expiration) for more reasons on why your token may have expired.
|
||||
|
||||
{% enddetails %}
|
||||
|
||||
@ -504,7 +502,7 @@ This feature is enabled by the following permissions:
|
||||
|
||||
- You can see stats about your subscriber in the [Cloud Console](https://console.cloud.google.com/cloudpubsub/subscription/list) which includes counts of messages published by your devices, and how many have been acknowledged by your Home Assistant subscriber. You can also `View Messages` to see examples of published. Many old unacknowledged messages indicate the subscriber is not receiving the messages and working properly or not connected at all.
|
||||
|
||||
- To aid in diagnosing subscriber problems or camera stream issues it may help to turn up verbose logging by adding some or all of these to your `configuration.yaml` depending on where you are having trouble:
|
||||
- To aid in diagnosing subscriber problems or camera stream issues it may help to turn up verbose logging by adding some or all of these to your `configuration.yaml` depending on where you are having trouble:
|
||||
|
||||
```yaml
|
||||
|
||||
|
||||
@ -16,9 +16,7 @@ ha_integration_type: integration
|
||||
|
||||
By default the integration will listen for incoming messages from OwnTracks via HTTP. It will also listen for MQTT messages if Home Assistant is configured to use MQTT. When a location is submitted via HTTP, Home Assistant will return all [Persons](/integrations/person/)' last known locations and they will be displayed within the OwnTracks app.
|
||||
|
||||
<div class='videoWrapper'>
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/UieAQ8sC6GY" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<lite-youtube videoid="UieAQ8sC6GY" videotitle="Location Tracking with OwnTracks HTTP Mode and Home Assistant" posterquality="maxresdefault"></lite-youtube>
|
||||
|
||||
## Configuration
|
||||
|
||||
|
||||
@ -93,12 +93,9 @@ If you change the YAML, you can reload it by calling the `person.reload` service
|
||||
|
||||
### Customizing the picture for a person
|
||||
|
||||
You can easily upload a picture in the frontend. Simply click on a person, select or drop an image in the input field, and then crop it.
|
||||
|
||||
<div class='videoWrapper'>
|
||||
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/rOlRnwaaT7Y" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
You can easily upload a picture in the frontend. Simply click on a person, select or drop an image in the input field, and then crop it.
|
||||
|
||||
<lite-youtube videoid="rOlRnwaaT7Y" videotitle="Changing a profile picture" posterquality="maxresdefault"></lite-youtube>
|
||||
|
||||
You can also do this using YAML. By following the instructions on the [customizing entities](/docs/configuration/customizing-devices#entity_picture) page, you can customize the picture used for a person entity in the `customize:` section of your configuration. For example:
|
||||
|
||||
|
||||
@ -18,9 +18,7 @@ The RTSPtoWebRTC integration registers with [camera integration](/integrations/c
|
||||
|
||||
The integration configuration requires the URL to your server (e.g. `http://example.com:8083`) and will automatically discover which type of server you have.
|
||||
|
||||
<div class='videoWrapper'>
|
||||
<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/6hJXenSZJ5M" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<lite-youtube videoid="6hJXenSZJ5M" videotitle="Real Time Camera Viewing using RTSPtoWeb and Glance Cards in Home Assistant." posterquality="maxresdefault"></lite-youtube>
|
||||
|
||||
{% include integrations/config_flow.md %}
|
||||
|
||||
|
||||
@ -24,9 +24,7 @@ The Somfy integration will allow users to integrate their Somfy devices into Hom
|
||||
|
||||
Somfy is leveraging the new account linking service. This means that to set up Somfy, you only need to go to the integrations page and click on add new integration.
|
||||
|
||||
<div class='videoWrapper'>
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/y0SECWUVR-M" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<lite-youtube videoid="y0SECWUVR-M" videotitle="New OAuth2 account linking service" posterquality="maxresdefault"></lite-youtube>
|
||||
|
||||
## Installation with own developer account
|
||||
|
||||
|
||||
@ -25,17 +25,13 @@ To make tags accessible to anyone in your house hold, there is also a [standalon
|
||||
|
||||
The easiest way to get started with tags is to use NFC tags ([stickers](https://amzn.to/3bQU0nN), [cards](https://amzn.to/2RlqPzM)) with the official Home Assistant mobile apps. Once you have written a card, hover it with your phone to scan it.
|
||||
|
||||
<div class="videoWrapper">
|
||||
<iframe width="853" height="480" src="https://www.youtube-nocookie.com/embed/Xc120lClUgA" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
|
||||
</div>
|
||||
<lite-youtube videoid="Xc120lClUgA" videotitle="Writing a tag (iOS)" posterquality="maxresdefault"></lite-youtube>
|
||||
|
||||
<div class='note' data-title='for iPhone users'>
|
||||
Only iPhone XS, XR and iPhone 11 or later support background NFC tag reading.
|
||||
</div>
|
||||
|
||||
<div class="videoWrapper">
|
||||
<iframe width="853" height="480" src="https://www.youtube-nocookie.com/embed/xE7wm1bxRLs" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
|
||||
</div>
|
||||
<lite-youtube videoid="xE7wm1bxRLs" videotitle="Writing a tag (Android)" posterquality="maxresdefault"></lite-youtube>
|
||||
|
||||
## Managing tags
|
||||
|
||||
@ -92,7 +88,7 @@ automation:
|
||||
{% endraw %}
|
||||
|
||||
To find your scanner's device ID, open Developer tools -> Events -> Listen to events and subscribe to `tag_scanned`.
|
||||
Then scan a tag on the reader and note down the `device_id` from the `data` section.
|
||||
Then scan a tag on the reader and note down the `device_id` from the `data` section.
|
||||
|
||||
## Printing tags
|
||||
|
||||
|
||||
@ -17,6 +17,4 @@ Today we're releasing Home Assistant companion app for iOS 2021.12. The big new
|
||||
|
||||
At the State of the Open Home I gave a quick demo, which I have embedded below:
|
||||
|
||||
<div class='videoWrapper'>
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/6ZMXE5PXPqU?start=7589" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<lite-youtube videoid="6ZMXE5PXPqU" videotitle="State of the Open Home 2021" videoStartAt="7589" posterquality="maxresdefault"></lite-youtube>
|
||||
|
||||
@ -97,9 +97,7 @@ Screenshot of Media Player Widget
|
||||
|
||||
Big thank you to everyone involved. Please keep those bug reports and feature requests coming! Be sure to watch the State of the Open Home address for what to expect in 2022 and a live demo of some of the features above!
|
||||
|
||||
<div class='videoWrapper'>
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/6ZMXE5PXPqU?start=9291" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<lite-youtube videoid="6ZMXE5PXPqU" videotitle="State of the Open Home 2021" videoStartAt="9291" posterquality="maxresdefault"></lite-youtube>
|
||||
|
||||
## Changelog
|
||||
|
||||
|
||||
@ -13,9 +13,7 @@ Last week we hosted the [State of the Open Home](/state-of-the-open-home/) and i
|
||||
|
||||
Genie is an open, privacy-preserving virtual assistant by [Stanford OVAL](https://oval.cs.stanford.edu/). During the impressive demo they showed it's latest capabilities. The demos run on a Baidu speaker with custom firmware and on a Pi Zero. In both cases it connects to the Genie server running as an official Home Assistant add-on to do it's magic.
|
||||
|
||||
<div class='videoWrapper'>
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/6ZMXE5PXPqU?start=9691" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<lite-youtube videoid="6ZMXE5PXPqU" videotitle="State of the Open Home 2021" videoStartAt="9691" posterquality="maxresdefault"></lite-youtube>
|
||||
|
||||
Genie is the successor to the Almond project. With the help of various grants and sponsors Stanford is working on making Genie ready for general use.
|
||||
|
||||
|
||||
@ -43,6 +43,4 @@ As we install more and more devices in our home, durability is becoming more and
|
||||
|
||||
At the State of the Open Home, we presented our vision and how we, together with our friends from open source and academia, are working towards achieving it.
|
||||
|
||||
<div class='videoWrapper'>
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/6ZMXE5PXPqU?start=512" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<lite-youtube videoid="6ZMXE5PXPqU" videotitle="State of the Open Home 2021" videoStartAt="512" posterquality="maxresdefault"></lite-youtube>
|
||||
|
||||
@ -13,9 +13,7 @@ Two weeks ago we hosted the [State of the Open Home](/state-of-the-open-home/).
|
||||
|
||||
They presented about their research into lowering grid demand by reducing thermostat temperatures. They want to learn when and why a reduced temperature is too uncomfortable causing tenants to become thermally frustrated and reverting the reduction.
|
||||
|
||||
<div class='videoWrapper'>
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/6ZMXE5PXPqU?start=8042" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<lite-youtube videoid="6ZMXE5PXPqU" videotitle="State of the Open Home 2021" videoStartAt="8042" posterquality="maxresdefault"></lite-youtube>
|
||||
|
||||
With Home Assistant we want every home to be about [privacy, choice and durability](/blog/2021/12/23/the-open-home/) and it's how we built Home Assistant. Because we believe in choice, all data in Home Assistant is accessible and one can extend or built on top of our platform.
|
||||
|
||||
|
||||
@ -17,13 +17,11 @@ Paulus Schoutsen, the founder of Home Assistant, will give the opening and closi
|
||||
|
||||
After the talks, attendees will be able to join various sessions about different topics like automations, Lovelace and Q&A with Home Assistant developers.
|
||||
|
||||
## Watch it back
|
||||
## Watching the conference
|
||||
|
||||
The conference is over! All talks have been [published online on YouTube](https://www.youtube.com/playlist?list=PLKsVm4cWHDQDGRXnybFUOLlcDWPsroGGB) and are also embedded below:
|
||||
|
||||
<div class="videoWrapper">
|
||||
<iframe width="853" height="480" src="https://www.youtube-nocookie.com/embed/videoseries?list=PLKsVm4cWHDQDGRXnybFUOLlcDWPsroGGB" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
|
||||
</div>
|
||||
<lite-youtube videoid="eh7BO_qro7c" playlistid="PLKsVm4cWHDQDGRXnybFUOLlcDWPsroGGB" videotitle="Home Assistant Conference 2020" posterquality="maxresdefault"></lite-youtube>
|
||||
|
||||
## Keynotes & Talks schedule
|
||||
|
||||
|
||||
@ -16,9 +16,7 @@ Home Assistant dashboards are a fast, customizable and powerful way for users to
|
||||
|
||||
To start, go to the Home Assistant Overview page, click on the three dots at the top right of the screen and select 'Edit Dashboard'. Then click on the blue '+ Add Card' icon at the bottom right and select a card to add.
|
||||
|
||||
<div class='videoWrapper'>
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/XY3R0xI45wA" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<lite-youtube videoid="XY3R0xI45wA" videotitle="Editing the user interface" posterquality="maxresdefault"></lite-youtube>
|
||||
|
||||
To try it yourself, check out [the demo](https://demo.home-assistant.io).
|
||||
|
||||
|
||||
@ -6,9 +6,7 @@ description: December 11, 2021 we will host the State of the Open Home.
|
||||
og_image: /images/state-of-the-open-home/social.png
|
||||
---
|
||||
|
||||
<div class='videoWrapper'>
|
||||
<iframe width="560" height="315" src="https://www.youtube.com/embed/6ZMXE5PXPqU?start=294" frameborder="0" allowfullscreen></iframe>
|
||||
</div>
|
||||
<lite-youtube videoid="6ZMXE5PXPqU" videotitle="State of the Open Home 2021" videoStartAt="290" posterquality="maxresdefault"></lite-youtube>
|
||||
|
||||
The State of the Open Home took place on December 11, 2021. Watch the recording of the event above. The following blog posts have been published based on State of the Open Home presentations:
|
||||
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user