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 "; 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> 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=";>4-Dec-2021 Saturday sunrise - Atlanta timeline