index.html

<!DOCTYPE html>
<html>

<head>
<style>
    .youtube-player {
        position: relative;
        padding-bottom: 50%;
        /* Use 75% for 4:3 videos */
        height: 0;
        overflow: hidden;
        max-width: 50%;
        background: #000;
        margin: 5px;
    }

    .youtube-player iframe {
        position: absolute;
        top: 0;
        left: 0;
        width: 50%;
        height: 50%;
        z-index: 50;
        background: transparent;
    }

    .youtube-player img {
        bottom: 0;
        display: block;
        left: 0;
        margin: auto;
        max-width: 50%;
        width: 50%;
        position: absolute;
        right: 0;
        top: 0;
        border: none;
        height: auto;
        cursor: pointer;
        -webkit-transition: .4s all;
        -moz-transition: .4s all;
        transition: .4s all;
    }

    .youtube-player img:hover {
        -webkit-filter: brightness(75%);
    }

    .youtube-player .play {
        height: 50px;
        width: 50px;
        left: 50%;
        top: 50%;
        margin-left: -36px;
        margin-top: -36px;
        position: absolute;
        background: url("//i.imgur.com/TxzC70f.png") no-repeat;
        cursor: pointer;
    }

</style>
</head>

<body>
<h2>


  <p>Thank You for trying out this new testing module. Let us (The Chief Residents) know of any improvements you would like.</p></h2>
  <img src="drwho.jpg" alt=""><br>
  <p></p>
    <img src="drgry.jpg" alt=""><br>


    <div class="youtube-player" data-id="PhhC_N6Bm_s"></div>

    <script>

        /* Light YouTube Embeds by @labnol */
        /* Web: http://labnol.org/?p=27941 */

        document.addEventListener("DOMContentLoaded",
            function() {
                var div, n,
                    v = document.getElementsByClassName("youtube-player");
                for (n = 0; n < v.length; n++) {
                    div = document.createElement("div");
                    div.setAttribute("data-id", v[n].dataset.id);
                    div.innerHTML = labnolThumb(v[n].dataset.id);
                    div.onclick = labnolIframe;
                    v[n].appendChild(div);
                }
            });

        function labnolThumb(id) {
            var thumb = '<img src="https://i.ytimg.com/vi/ID/hqdefault.jpg">',
                play = '<div class="play"></div>';
            return thumb.replace("ID", id) + play;
        }

        function labnolIframe() {
            var iframe = document.createElement("iframe");
            var embed = "https://www.youtube.com/embed/ID?autoplay=1";
            iframe.setAttribute("src", embed.replace("ID", this.dataset.id));
            iframe.setAttribute("frameborder", "0");
            iframe.setAttribute("allowfullscreen", "1");
            this.parentNode.replaceChild(iframe, this);
        }

    </script>


</body>
</html>