How to remove Youtube suggested videos when you use iframe?

How to remove Youtube suggested videos when you use iframe?

When you are using youtube iframe videos on your website then youtube gives the youtube suggested video at the end of the video as it is not possible to do this but i had tried to provide the solutions by using a simple trick.

 HTML 

<div id="playerWrapOuter"> 

<div id="playerWrap"> 

<iframe width="640" height="360" src="https://www.youtube.com/embed/IlXjoPtTGT8?rel=0&enablejsapi=1" frameborder="0" ></iframe>

</div>

</div>

More information please visit this url https://www.papawebdesigner.com/

 CSS 

<style>

#playerWrap {

display: inline-block;

position: relative;

}

#playerWrap.shown::after {

content: "";

position: absolute;

top: 0;

left: 0;

bottom: 0;

right: 0;

cursor: pointer;

background-color: black;

background-repeat: no-repeat;

background-position: center;

background-size: 64px 64px;

background-image: url(data:image/svg+xml;utf8;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjgiIGhlaWdodD0iMTI4IiB2aWV3Qm94PSIwIDAgNTEwIDUxMCI+PHBhdGggZD0iTTI1NSAxMDJWMEwxMjcuNSAxMjcuNSAyNTUgMjU1VjE1M2M4NC4xNSAwIDE1MyA2OC44NSAxNTMgMTUzcy02OC44NSAxNTMtMTUzIDE1My0xNTMtNjguODUtMTUzLTE1M0g1MWMwIDExMi4yIDkxLjggMjA0IDIwNCAyMDRzMjA0LTkxLjggMjA0LTIwNC05MS44LTIwNC0yMDQtMjA0eiIgZmlsbD0iI0ZGRiIvPjwvc3ZnPg==);

}

</style>

 JS 

<script>

(function() {

    let playerFrame = document.currentScript.previousElementSibling.querySelector("iframe");

    let tag = document.createElement('script');

    tag.src = "https://www.youtube.com/iframe_api";

    let firstScriptTag = document.getElementsByTagName('script')[0];

    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

    let player;

    window.onYouTubeIframeAPIReady = function() {

        player = new YT.Player(playerFrame, {

            events: {

                'onStateChange': onPlayerStateChange

            }

        });

    };

    window.onPlayerStateChange = function(event) {

        if (event.data == YT.PlayerState.ENDED) {

            document.getElementById("playerWrap").classList.add("shown");

        }

    };

    document.getElementById("playerWrap").addEventListener("click", function() {

        player.seekTo(0);

        document.getElementById("playerWrap").classList.remove("shown");

    });

})();

</script>

if you want to use sticky header then go through this link.

if you want to use Jquery-calendar then go through this link.

if you want to use hide-show-jquery then go through this link.

Follow On Social Media -

Follow on Facebook   -  https://www.facebook.com/Front-End-Issue-487743404963344
Follow on instagram   -  https://www.instagram.com/frontendissue/  
Follow on Twitter       -  https://twitter.com/IssueEnd
Follow on Linkedin     -  https://www.linkedin.com/in/hitesh-patidar-34253a10a/ 
Follow on GooglePlus -  https://plus.google.com/118238268171156252992
Follow on pinterest    -  https://in.pinterest.com/frontendissue/