| <!-- |
| # 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 a YouTube embedded video 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 flexible than 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/3kdn2yk6nss'); |
| 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> |
