youtube api embed with rel=0

I understand that the ?rel=0 does not remove recommended videos any more. Instead, it only shows videos from the same channel. But how do I append the ?rel=0 to an embedded URL?

I have the following JS to embed the video

(function () {

    var swappers = document.querySelectorAll('[data-video-id]');
    console.log('video')
    swappers.forEach(function (swapper) {
        swapper.addEventListener('click', function (e) {
            e.preventDefault();
            var wrapper = swapper.parentNode;
            var videoId = swapper.dataset.videoId;
            var source = swapper.dataset.videoSource;
            while (wrapper.firstChild) { wrapper.removeChild(wrapper.firstChild); }

            switch (source) {
                case 'youtube':
                    // add youtube api code to do autoplay in safari
                    wrapper.innerHTML = '<div id="video-' + videoId + '"></div>';

                    var tag = document.createElement('script');
                    tag.id = 'yt-api';
                    tag.src = 'https://www.youtube.com/iframe_api';
                    var firstScriptTag = document.getElementsByTagName('script')[0];
                    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

                    var checkYT = setInterval(function () {
                        if (YT.loaded) {
                            clearInterval(checkYT);
                            var player = new YT.Player('video-' + videoId, {
                                videoId: videoId,
                                events: { 'onReady': function (e) { e.target.playVideo(); } }
                            });
                        }
                    }, 50);
                    break;
                case 'vimeo':
                    // Add Vimeo default Enbed code
                    wrapper.innerHTML = '<iframe src="https://player.vimeo.com/video/' + videoId + '?autoplay=1&title=0&byline=0&portrait=0"width="640" height="360" frameborder="0" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>';
                    break;
            }

        });
    });

})();

I thought adding the ?rel=0 to the url would work but since its embedded it just removes the ?rel=0. adding the rel=0 to the url doesn’t work and it ends up showing videos from random channels.

Here is the HTML

{% set url = 'https://www.youtube.com/watch?v='~block.video_id~'?rel=0' %}
  <div class="video_wrap">
    <a href="{{ url }}" data-video-id="{{ block.video_id }}" title="Play embedded video" data-video-source="{{ block.video_source ?: "youtube" }}">
    {{ image|raw }}
    </a>
  </div>

In this section of your code:

var checkYT = setInterval(function () {
    [...]
}, 50);

Add the playerVars object with the rel parameter and value 0:

So, you modified code should look like as follows:

var checkYT = setInterval(function () {
    if (YT.loaded) {
        clearInterval(checkYT);
        var player = new YT.Player('video-' + videoId, {
            videoId: videoId,
            events: { 'onReady': function (e) { e.target.playVideo(); } }, 
            playerVars: { 'rel': 0 }
        });
    }
}, 50);

Once the iframe is rendered, you'll see the iframe's URL and see that the rel=0 was added.