Good day, dear experts.

just a great thing about this frame, allows the background to load the page. There is a problem, if on the loaded page there is a video from YouTube on autoplaying, then the background sounds from the video. How to make it happen? tried display: none - does not help: (

    2 answers 2

    Insert your video id into videoId .

      function onYouTubeIframeAPIReady() { var player; player = new YT.Player('muteYouTubeVideoPlayer', { videoId: 'CBprH6ueM9U', // YouTube Video ID width: 560, // Player width (in px) height: 316, // Player height (in px) playerVars: { autoplay: 1, // Auto-play the video on load controls: 1, // Show pause/play buttons in player showinfo: 0, // Hide the video title modestbranding: 1, // Hide the Youtube Logo loop: 1, // Run the video in a loop fs: 0, // Hide the full screen button cc_load_policy: 0, // Hide closed captions iv_load_policy: 3, // Hide the Video Annotations autohide: 0 // Hide video controls when playing }, events: { onReady: function(e) { e.target.mute(); } } }); } // Written by @labnol 
     <div id="muteYouTubeVideoPlayer"></div> <script async src="https://www.youtube.com/iframe_api"></script>

      Calling play() on the <video> in the latest browser versions causes promise . If the video is playing, we get resolve ; if not, - reject (+ gives a detailed error)

       var playerPromise = document.querySelector('videoFrame').play(), player = document.querySelector('videoFrame'); if (playerPromise !== undefined) { playerPromise.then(function() { // если проигрывание стоит на автомате player.stop(); }).catch(function(error) { // не проигрывается. Тут можно вызвать событие клика на кнопку проигрывания, для триггера document.querySelector('youtubePlayButton').addEventListener('click',function(){ player.play(); }); }); }