Фоновая подгрузка страницы черезе iframe

205

06 апреля 2017, 17:10

Доброго времени суток, уважаемые знатоки.

просто замечательная штука этот фрейм, позволяет фоном загрузить страницу. Есть проблема, если на подгружаемой странице стоит видео с ютуба на автопроигрывании, то фоном начинают звучать звуки с видео. Как сделать так, чтобы этого не происходило? пробовал display:none - не помогает :(

Answer 1

В 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>

Answer 2

Вызов play() на тэге <video> в последних версиях браузеров позвращает promise. Если видео проигрывается - получаем resolve, если нет, - reject (+ дает детальную ошибку)

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();
     });
  });
}