YouTube iframe without allow-presentation

I am building an extension for Content management system admin UI. The extension is hosted by the CMS in a sandboxed iframe.

The purpose of the extension is to embed a youtube video so that the user is able to see its preview. So it is an iframe within the sandboxed iframe.

The problem I have is that the sandbox (parent iframe) doesn't have the allow-presentation allowed, which is causing the following exception to fire in YouTube embed code:

DOMException: Failed to construct 'PresentationRequest': The document is sandboxed and lacks the 'allow-presentation'

The video works correctly, but the unhandled error is making unwanted debug breakpoints, and spams the browser console.

I have tried to disable fullscreen mode with ?fs=0 parameter but the code is still called and the error is still thrown.

Is there a way to make the embed code work without errors in an iframe that doesn't have allow-presentation enabled?

Add this inside the onYouTubeIframeAPIReady() function that creatse the and YouTube Player, add it under the player = new YT.Player (...) part (check code snipet) P.S. It will still trigger your console error but only once, since it will load without that parameter by defauult from YouTubes API, if you know of a better way please let me know.

  player.h.attributes.sandbox.value = "allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation";

// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');

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


// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;

function onYouTubeIframeAPIReady() {
  player = new YT.Player('player', {
    height: '360',
    width: '640',
    videoId: 'kbOBVUBX6E4',
    events: {
      'onReady': onPlayerReady,
      'onStateChange': onPlayerStateChange
    }
  });
  /*ADD THIS HERE SO IT UPDATED THE IFRAME PARAMETERS AFTER ITS GOTEN RENDERED*/
  player.h.attributes.sandbox.value = "allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation";
}

function onPlayerReady(event) {
  event.target.playVideo();


}


var done = false;

function onPlayerStateChange(event) {
  if (event.data == YT.PlayerState.PLAYING && !done) {
    setTimeout(stopVideo, 6000);
    done = true;
  }
}

function stopVideo() {
  player.stopVideo();
}

<!-- https://developers.google.com/youtube/iframe_api_reference#Loading_a_Video_Player -->
<div id="player" class="player"></div>

<!--EXPECTED OUTPUT -->
<!--
            <iframe id="player" class="player" frameborder="0" allowfullscreen="1" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" title="Why YouTube Cant Survive Without ads : Micropayments" width="700" height="360" src="https://www.youtube.com/embed/kbOBVUBX6E4?enablejsapi=1&amp;widgetid=1" sandbox="allow-same-origin allow-scripts allow-forms allow-popups allow-popups-to-escape-sandbox allow-presentation"></iframe>         
            <div id="player" class="player" allow="allow-presentation"></div> 
          <i id='play-start' class="fas fa-play"></i>
          <progress id="progress" max="100" value="0">Progress</progress>
            -->

Recommended topics

Hot tags