JSFiddle - React, Tailwind, and code Playground

by Michel Plungjan

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.min.js"></script>
<div class="node--view-mode-full">
  <div class="wrapper"><iframe allow="fullscreen" allowfullscreen="" frameborder="0" height="980" scrolling="no" src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" width="660"></iframe></div>
  <div class="wrapper"><iframe allow="fullscreen" allowfullscreen="" frameborder="0" height="980" scrolling="no" src="https://www.w3.org/WAI/ER/tests/xhtml/testfiles/resources/pdf/dummy.pdf" width="660"></iframe></div>
</div>

JavaScript

const fullScreen = elem => {
  if (elem.requestFullscreen) {
    elem.requestFullscreen();
  } else if (elem.webkitRequestFullscreen) { /* Safari */
    elem.webkitRequestFullscreen();
  } else if (elem.msRequestFullscreen) { /* IE11 */
    elem.msRequestFullscreen();
  }
};

$(function() {
  $(".node--view-mode-full iframe[src*='.pdf']").each(function(index) {
    $(this).addClass('fullscreenframe');
    $(this).attr('id', 'fullscreen-' + index);
    $('<button class="fullScreen">Open in Fullscreen Mode</button>&nbsp;<strong>Tip:</strong> Press the "Esc" key to exit full screen.<br>').insertBefore(this);
  });
  $(".fullScreen").on("click", function() {
    const $iFrame = $(this).closest('.wrapper').find('iframe.fullscreenframe');
    if ($iFrame) fullScreen($iFrame.get(0)); // pass the DOM element
  });
});