htmliframeembed

Safely embedding YouTube video in a div of a web page

I am building a php script that will write out a page with three divisions. One of the divs has an iframe in it, and this is where the problem begins. My end goal is to have a document that shows a list of videos on the left, and on the right a window with a selected video playing (or playable), and below that, a place where notes can be made, stored and reviewed.

My result seems to display correctly (javascript notwithstanding) but if I enable browser debug, I see underlying problems, notably "SecurityError: Blocked a frame with origin "https://youtube.com" from accessing a cross-origin frame. I am certain that any Javascript attempt will be stopped cold due to this error.

I don't understand most of what this is trying to tell me, and have done some research to resolve the issue. I found this question: SecurityError: Blocked a frame with origin from accessing a cross-origin frame

This question seems different from my problem in that the originator has success until JavaScript accesses the iframe (not sure of the details behind that). In my case, without any javascript at all, this .html will immediately fail with that same message.

This example shows the problem:

<!DOCTYPE html>
<html lang='en'>
<head>
    <title>Livestreams</title>
    <script type='text/javascript' src='livestreamSongs.js'></script>
</head>
<body><br>
<div id='fullPageDiv' style='width: 100%; overflow:hidden;'>
<div id='livestreamTable' style='width: 60%;float:left;'>
<table>
<thead>
<tr>
      <th>Started</th>
      <th>Songs already noted</th>
      <th style='text-align:right;'>Duration</th>
      <th style='text-align:right;'>Dimensions</th>
      <th>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; Livestream Title</th>
    </tr></thead><tbody>
<tr id='livestream_row_0'>
  <td>2021-12-04 07:15:08</td>
  <td style='text-align:right;'>18</td>
  <td style='text-align:right;'>1:04:54</td>
  <td style='text-align:right;' id='videoDimensions0'>1280x720*</td>
  <td><span onclick='selectVidId("nPRxBRG4SeE", "0", "livestream_row_0","" ,"" );'>Select </span><a href="https://youtu.be/pzf3VlKNLiI">4-Dec-2021 Saturday sunrise - Atlanta timeline 🖕</a></td>
</tr>
<tr id='livestream_row_1'>
  <td>2021-12-11 07:22:13</td>
  <td>2021-12-11 08:24:27</td>
  <td style='text-align:right;'>21</td>
  <td style='text-align:right;'>1:02:15</td>
  <td style='text-align:right;' id='videoDimensions1'>1280x720*</td>
  <td><span onclick='selectVidId("UpiM1Kd6zS4", "1", "livestream_row_1","" ,"" );'>Select </span><a href="https://youtu.be/ZIy9fdQvO08">11-Dec-2021 Saturday sunrise - Atlanta timeline</a></td>
</tr>
</tbody>
</table>
  </div>
  <div id='embedDiv' style='display:block;'>
      <iframe id='embedIframe'
              width='426' height='253'
              src='https://youtube.com/embed/49tPgQZZ0eE'
              ></iframe>
</div>
<div id='notesDiv' style='display:none;'>
   <table id='notesTable'>
     <thead>
        <tr><td>Head1</td></tr>
     </thead>
     <tbody>
     </tbody>
   </table>
</div>
</div><!-- This is the "page" division (the whole page after the form) -->
</html>

It's ugly because I reduced this to minimal while still sharing the general overview. When this page is loaded, I immediately get that error in my browser debug session (happens to be Chrome).

EDIT As an update, I replaced the embedDiv as follows:

            <div id='embedDiv' style='display:block;'>
                <embed id='embedTag'
                        wmode='transparent'
                        width='$width' height='$height'
                        type='video/mp4'
                        allow='autoplay;encrypted-media;picture-in-picture;'
                        src='https://youtube.com/embed/_xHIjlQ6vgU&?autoplay=1'
                        title='Livestream title goes here'
                        >
          </div>

This did not resolve the issue, so replacing iframe with embed is not enough.

Is my end goal even possible? It's odd because even in a page with no mention of javaScript at all, the browser in debug mode will show this error, but outside of debug mode, the casual user would never know there's an issue.

Solution

  • YouTube provides an API for this, described at https://developers.google.com/youtube/iframe_api_reference

    There are many customizations that may be applied to the (automatically-embedded) video, including autoplay, muting (see this especially for muting: YouTube: How to present embed video with sound muted), inclusion/exclusion of YouTube branding, and on and on. Very nice (IMO) and it eliminates the iframe security problem.