| <!-- |
| # 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> |
| <h2>Pelican</h2> |
| <div> |
| If you're using the <a href="https://github.com/apache/infrastructure-pelican">ASF Pelican tools</a> you can use the <a href="https://github.com/apache/infrastructure-pelican/blob/master/plugins/consensual_youtube.py#L20">consensual_youtube</a> plugin. |
| <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: '3kdn2yk6nss', |
| playerVars: { |
| 'playsinline': 1 |
| }, |
| events: { |
| 'onReady': (event) => { |
| event.target.playVideo(); |
| } |
| } |
| }); |
| }); |
| }); |
| } |
| |
| var container = document.querySelector('#yt-container'); |
| container.addEventListener('click', addElement); |
| </script> |
| </body> |
| </html> |
