YouTube embedded video auto loop without refresh screen

Question

I want to show a video which starts to run automatically and loops infinitely in my adobe portfolio website. I tried using YouTube embedded video with autoplay and loop options (see below code), however, every time the video ends there is a black refresh screen before it starts again which ruins the appearance of my website. The video format I'm using is .mp4. I know that with .gif file this problem can be solved, however, the video quality will not be sufficient. I tried downloading the video into the portfolio website directly, however, I couldn't make it loop or autoplay.

I would appreciate your help in this matter.
Thanks, Tal

The code:

<iframe width="1920" height="1080"
     src="https://www.youtube.com/embed/youtubelink?rel=0&autoplay=1&controls=0&loop=1&playlist=youtubelink&amp;controls=0&amp;showinfo=0" 
     frameborder="0" allowfullscreen> 
</iframe>

Answer 1

After some research I've finally got it working, the solution is to use the API iframe embed code (https://developers.google.com/youtube/iframe_api_reference) and instead of using the loop parameter you make use of the onPlayerStateChange function. Here is a code example:

                  <div id="player"></div>
                    <script>
                      var tag = document.createElement('script');
                      tag.src = "https://www.youtube.com/iframe_api";
                      var firstScriptTag = document.getElementsByTagName('script')[0];
                      firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

                      var player;
                      function onYouTubeIframeAPIReady() {
                        player = new YT.Player('player', {
                            videoId: '<?php the_field('homepage_video_background_id'); ?>',
                            playerVars: {
                                modestbranding: 0,
                                autoplay: 1,
                                controls: 0,
                                showinfo: 0,
                                wmode: 'transparent',
                                branding: 0,
                                rel: 0,
                                autohide: 0,
                                origin: window.location.origin
                            },
                            events: {
                                'onReady': onPlayerReady,
                                'onStateChange': onPlayerStateChange
                            }
                          });
                        }
                        function onPlayerReady(event) {
                            event.target.playVideo();
                        }
                        function onPlayerStateChange(event) {
                            if (event.data === YT.PlayerState.ENDED) {
                                player.playVideo(); 
                            }
                        }
                    </script>

Answer 2

This method still flashes an instant black screen before restarting the video. If you need a smoother loop use this;

'onStateChange': function (event) {
           var YTP=event.target;
           if(event.data===1){
                var remains=YTP.getDuration() - YTP.getCurrentTime();
                if(this.rewindTO)
                    clearTimeout(this.rewindTO);
                this.rewindTO=setTimeout(function(){
                     YTP.seekTo(0);
                 },(remains-0.1)*1000);
             }
 }