You are viewing a plain text version of this content. The canonical link for it is here.
Posted to privacy-commits@apache.org by gr...@apache.org on 2023/05/17 12:50:21 UTC
[privacy-website] branch main updated: added examples how to embed Youtube videos
This is an automated email from the ASF dual-hosted git repository.
grobmeier pushed a commit to branch main
in repository https://gitbox.apache.org/repos/asf/privacy-website.git
The following commit(s) were added to refs/heads/main by this push:
new 2dd7e16 added examples how to embed Youtube videos
2dd7e16 is described below
commit 2dd7e1632cb6b642a480eef220ffc5bb77d2bfe9
Author: Christian Grobmeier <cg...@grobmeier.de>
AuthorDate: Wed May 17 14:50:15 2023 +0200
added examples how to embed Youtube videos
---
examples/youtube-html/placeholder.jpg | Bin 0 -> 109580 bytes
examples/youtube-html/with-youtube-api.html | 81 +++++++++++++++++++++++++
examples/youtube-html/with-youtube-embeds.html | 62 +++++++++++++++++++
faq/committers.md | 9 ++-
policies/website-policy.md | 5 +-
5 files changed, 153 insertions(+), 4 deletions(-)
diff --git a/examples/youtube-html/placeholder.jpg b/examples/youtube-html/placeholder.jpg
new file mode 100644
index 0000000..5150f28
Binary files /dev/null and b/examples/youtube-html/placeholder.jpg differ
diff --git a/examples/youtube-html/with-youtube-api.html b/examples/youtube-html/with-youtube-api.html
new file mode 100644
index 0000000..f27ab1f
--- /dev/null
+++ b/examples/youtube-html/with-youtube-api.html
@@ -0,0 +1,81 @@
+<!--
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements. See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership. The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License. You may obtain a copy of the License at
+#
+# http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations
+# under the License.
+-->
+<html>
+ <head>
+ <title>Example for embedding Youtube videos</title>
+ <style>
+ #yt-container {
+ text-align: center;
+ width: 640px;
+ height: 390px;
+ background-image: url('placeholder.jpg');
+ background-size: cover;
+ }
+ </style>
+
+ </head>
+ <body>
+ <div id="yt-container">
+ </div>
+
+ <div>Clicking on this link will load and send data from and to Google.</div>
+
+ <h1>Usage</h1>
+ <div>
+ This script loads the YouTube API script, when a user clicks on the image.
+ Once loaded, the video will be played automatically.
+ This version gives you more control over the video, e.g. you can pause it.
+ <a href="https://developers.google.com/youtube/iframe_api_reference">See the documentation for more information.</a>
+ </div>
+ <script>
+ function loadScript() {
+ return new Promise((resolve, reject) => {
+ let script = document.createElement('script');
+ script.src = 'https://www.youtube.com/iframe_api';
+ script.addEventListener('load', resolve);
+ script.addEventListener('error', (e) => reject(e));
+ document.body.appendChild(script);
+ });
+ }
+
+ function addElement() {
+ loadScript().then(() => {
+ window.YT.ready(function() {
+ let player = new YT.Player('yt-container', {
+ height: '390',
+ width: '640',
+ videoId: 'GU0SV_2tWkU',
+ playerVars: {
+ 'playsinline': 1
+ },
+ events: {
+ 'onReady': (event) => {
+ event.target.playVideo();
+ }
+ }
+ });
+ });
+ });
+ }
+
+ var container = document.querySelector('#yt-container');
+ container.addEventListener('click', addElement);
+ </script>
+ </body>
+</html>
\ No newline at end of file
diff --git a/examples/youtube-html/with-youtube-embeds.html b/examples/youtube-html/with-youtube-embeds.html
new file mode 100644
index 0000000..b81ff53
--- /dev/null
+++ b/examples/youtube-html/with-youtube-embeds.html
@@ -0,0 +1,62 @@
+<!--
+# Licensed to the Apache Software Foundation (ASF) under one
+# or more contributor license agreements. See the NOTICE file
+# distributed with this work for additional information
+# regarding copyright ownership. The ASF licenses this file
+# to you under the Apache License, Version 2.0 (the
+# "License"); you may not use this file except in compliance
+# with the License. You may obtain a copy of the License at
+#
+# http://www.apache.org/licenses/LICENSE-2.0
+#
+# Unless required by applicable law or agreed to in writing,
+# software distributed under the License is distributed on an
+# "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+# KIND, either express or implied. See the License for the
+# specific language governing permissions and limitations
+# under the License.
+-->
+<html>
+ <head>
+ <title>Example for embedding Youtube videos</title>
+ <style>
+ .yt-container {
+ text-align: center;
+ width: 560px;
+ height: 315px;
+ background-image: url('placeholder.jpg');
+ background-size: cover;
+ }
+ </style>
+ </head>
+ <body>
+ <div class="yt-container">
+ </div>
+ <div>Clicking on this link will load and send data from and to Google.</div>
+ <h1>Usage</h1>
+ <div>
+ This script loads an YouTube embed, when a user clicks on the image.
+ Once loaded, the video will NOT be played automatically.
+ This version is simpler to add, and probably a little bit faster to load.
+ However, it appears to be less flexibel then the API version.
+ <a href="https://developers.google.com/youtube/iframe_api_reference">See the documentation for more information.</a>
+ </div>
+ <script>
+ var container = document.querySelector('.yt-container');
+
+ function addElement() {
+ var iframe = document.createElement('iframe');
+ iframe.setAttribute('width', '560');
+ iframe.setAttribute('height', '315');
+ iframe.setAttribute('src', 'https://www.youtube-nocookie.com/embed/GU0SV_2tWkU');
+ iframe.setAttribute('title', 'YouTube video player');
+ iframe.setAttribute('frameborder', '0');
+ iframe.setAttribute('allow', 'accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share');
+ iframe.setAttribute('allowfullscreen', '');
+ container.appendChild(iframe);
+ }
+
+ container.addEventListener('click', addElement);
+ </script>
+ </body>
+</html>
\ No newline at end of file
diff --git a/faq/committers.md b/faq/committers.md
index 952e2d7..9a643d3 100644
--- a/faq/committers.md
+++ b/faq/committers.md
@@ -67,8 +67,8 @@ Please do not install and run your own instances of Matomo.
### Can I use Scarf to analyse our downloads?
-Yes: Scarf has signed a DPA with us, fully supports the GDPR and was added to our privacy terms. It is possible to use their
-service.
+Yes: Scarf has signed a DPA with us, fully supports the GDPR and was added to our privacy terms.
+It is possible to use their service.
### Can I use another analytics/tracking etc software?
@@ -99,6 +99,8 @@ actively wants to use them. Arrange this by showing a placeholder image first
and loading the map when the user clicks on the image. Make it clear
that users will load a Google Map with their click.
+For an idea of how to implement this, please see: [YouTube Example 1](/examples/youtube-html/with-youtube-api.html)
+
### Can I embed videos (from YouTube, Vimeo, etc.)?
Yes, you can embed videos on the website, but they should load
@@ -110,6 +112,9 @@ will load a video from a third party.
If you don't want placeholder images, consider self-hosted videos
and using an open source player like [Plyr](https://github.com/sampotts/plyr).
+For embedding videos, please see: [YouTube Example 1](/examples/youtube-html/with-youtube-api.html)
+and [YouTube Example 2](/examples/youtube-html/with-youtube-embeds.html)
+
### Can I embed social plugins (in example Like-Buttons)?
Yes, but you can only load them when users actively want them
diff --git a/policies/website-policy.md b/policies/website-policy.md
index 5c88f1a..724e54f 100644
--- a/policies/website-policy.md
+++ b/policies/website-policy.md
@@ -19,8 +19,6 @@
layout: default
---
-**---> DRAFT VERSION**
-
This policy describes restrictions for websites managed by the
ASF or hosted on ASF servers.
@@ -41,6 +39,9 @@ If you need analytics, please use our self-hosted [Matomo](/matomo) instance.
YouTube content can be embedded only when the creator has given consent before loading
any file from YouTube.
+Please see: [YouTube Example 1](/examples/youtube-html/with-youtube-api.html)
+and [YouTube Example 2](/examples/youtube-html/with-youtube-embeds.html)
+
## 3) Cookies
No cookies are allowed, except if the user must give consent before the website sets the cookie.
---------------------------------------------------------------------
To unsubscribe, e-mail: privacy-commits-unsubscribe@apache.org
For additional commands, e-mail: privacy-commits-help@apache.org