examples/youtube-html/with-youtube-embeds.html

<!--
# 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>