index.html

﻿<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <link rel="stylesheet"
          href="https://unpkg.com/turretcss/dist/turretcss.min.css"
          crossorigin="anonymous" />
    <link rel="stylesheet"
          href="index.css"
          />
    <title>Picture in Picture</title>
</head>
<body>
    <main>
        <h1>Picture In Picture Viewer for YouTube</h1>
        <div id="main-viewer-container" class="container">
            <h2>Main Viewer</h2>
            <iframe id="video-main"
                    allow="accelerometer; autoplay; encrypted-media; gyroscope"
                    allowfullscreen
                    disablePictureInPicture
                    frameborder="0"
                    enablejsapi="1"
                    style="border: solid 2px #37474F">
                No main video found. Set your v1 value below.
            </iframe>
        </div>
        <div class="container">
            <h2>PIP viewer</h2>
            <iframe id="video-pip"
                    allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
                    enablejsapi="1">
                No PIP video found. Set your v2 value below.
            </iframe>
        </div>
    </main>
    <aside class="container">
        <a href="https://www.pcmag.com/how-to/how-to-enable-picture-in-picture-video-in-your-browser">Make sure PIP is enabled in your browser</a>
    </aside>
    <div class="container">
        <h2>Create video link</h2>
        <form onsubmit="return createLinkHandler(event)">
            <p class="field input-group">
                <label for="video1-input">Video 1 (main)</label>
                <input id="video1-input" type="text" name="video1" required />
            </p>
            <p class="field input-group">
                <label for="video2-input">Video 2 (PIP)</label>
                <input id="video2-input" type="text" name="video2" required />
            </p>
            <button type="submit" class="button button-primary">Create link</button>
            <button type="reset" class="button button-secondary">Reset</button>
        </form>
        <label for="new-link">Result link</label>
        <input readonly id="new-link-text" />
        <a id="new-link" href="#">Go to page</a>
    </div>
    <hr />
    <div class="container">
        <h2>PIP Troubleshooting</h2>
        <div>
            <h3>PIP on Chrome</h3>
            <img src="chrome-help.gif" alt="How to enable PIP on Chrome browser" />
        </div>
        <div>
            <h3>PIP on Firefox</h3>
            <img src="ff-help.PNG" alt="How to enable PIP on Firefox browser" />
        </div>
    </div>
    <noscript>
        <strong>
            We're sorry but communote doesn't work properly without JavaScript
            enabled. Please enable it to continue.
        </strong>
    </noscript>
    <script src="index.js" type="text/javascript"></script>

</body>
</html>