jeans/home-assistant.io
jeans/home-assistant.io
1
0
Fork 0
mirror of https://github.com/home-assistant/home-assistant.io.git synced 2025-07-21 08:16:53 +00:00
Code Issues Packages Projects Releases Wiki Activity

Do not load youtube iframes until interaction (#22389)

Browse Source
This commit is contained in:
Paulus Schoutsen 2022-04-14 09:15:33 -07:00 committed by GitHub
parent 9e49f44a7e
commit 7711befae0
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 42 additions and 57 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
sass/custom/_paulus.scss
View File

@ -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 {

4
source/_includes/javascripts/scripts.html
View File

@ -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>

4
source/_integrations/alexa.intent.markdown
View File

@ -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

4
source/_integrations/nest.markdown
View File

@ -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

4
source/_integrations/owntracks.markdown
View File

@ -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

5
source/_integrations/person.markdown
View File

@ -95,10 +95,7 @@ If you change the YAML, you can reload it by calling the `person.reload` service
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>
<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:

4
source/_integrations/rtsp_to_webrtc.markdown
View File

@ -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 %}

4
source/_integrations/somfy.markdown
View File

@ -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

8
source/_integrations/tag.markdown
View File

@ -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

4
source/_posts/2021-12-18-ios-multi-server.markdown
View File

@ -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>

4
source/_posts/2021-12-21-android-december-2021-release.markdown
View File

@ -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

4
source/_posts/2021-12-21-stanford-genie.markdown
View File

@ -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.

4
source/_posts/2021-12-23-the-open-home.markdown
View File

@ -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>

4
source/_posts/2021-12-28-northeastern-university-home-energy-management.markdown
View File

@ -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.

6
source/conference/index.markdown
View File

@ -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

4
source/dashboards/index.markdown
View File

@ -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).

4
source/state-of-the-open-home/index.markdown
View File

@ -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: