this will be my first help.
What causes that error in your project is that you specify a custom size for the image. At first, I tried to fix it from the style side, but since you specify a custom size for the image, it does not prioritize the style codes.
I have corrected your code a little bit with my own perspective :) Here you go
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
<title>Livestreams</title>
<style>
.tableTitle tr th {
padding: 10px;
}
.songTitle {
width: 420px;
}
.buttons button {
margin-right: 15px;
}
</style>
</head>
<body>
<div class="container">
<div class="row mt-5">
<div class="col-4">
<div id="YouTubeVideoPlayer">
<img src="https://web.lovelady.com/siteImages/bunnyfuzz.jpg" style="width:400px; height:400px"
alt="placeholder">
</div> <!-- YouTubeVideoPlayer -->
</div>
<div class="col-8">
<div class="selectSong mb-3">
<label for="selectSong">Matching Songs: </label>
<select name='selectSong' id='selectSong' onchange='selectedSongFromHints(this) ;'>
<option value='Song suggestions:'>Songs matching "Cool "</option>
<option value='COOL WATER 0'>Cool Water (Marty Robbins cover)</option>
<option value='THAT AINT COOL 1'>That Ain't Cool</option>
</select>
</div>
<div class="songsTable mt-3">
<table class="table">
<thead>
<tr>
<th style="text-align: center;">Sav</th>
<th style="text-align: center;">Clr</th>
<th style="text-align: right;">Time</th>
<th class="songTitle">Song Title</th>
<th style="text-align: center;">Category</th>
</tr>
</thead>
<tbody>
<tr onclick='selectSongRow(this, 0) ;' id='perf_row_0'>
<th scope="row">
<input type='checkbox' id='perf_saved_0' name='perf_saved_0' checked
onclick='savePerfSong(this, 0);'>
</th>
<td style='text-align:center;' onclick='clearSongRow(0);'>✖</td>
<td style="text-align: right;">
<input type='text' id='perf_time_0' name='perf_time_0' style='text-align:right;'
minLength='4' maxLength='7' size='7' value='0:20'
onkeyup='changedPerfTime(this, 0);'>
</td>
<td><input type='text' id='perf_title_0' name='perf_title_0' style='text-align:left;'
minLength='4' maxlength='80' size='50' value="You Don't Bring Me Flowers"
onkeyup='changedPerfSong(this, 0);'></td>
<td><input type='text' id='perf_save_0' name='perf_save_0'></td>
</tr>
<tr>
<th scope="row">
<input type='checkbox' id='perf_saved_0' name='perf_saved_0' checked
onclick='savePerfSong(this, 0);'>
</th>
<td style='text-align:center;' onclick='clearSongRow(0);'>✖</td>
<td style="text-align: right;">
<input type='text' id='perf_time_0' name='perf_time_0' style='text-align:right;'
minLength='4' maxLength='7' size='7' value=''
onkeyup='changedPerfTime(this, 0);'>
</td>
<td>
<input type='text' id='perf_title_0' name='perf_title_0' style='text-align:left;'
minLength='4' maxlength='80' size='50' value=""
onkeyup='changedPerfSong(this, 0);'>
</td>
<td><input type='text' id='perf_save_0' name='perf_save_0'></td>
</tr>
<tr>
<th scope="row">
<input type='checkbox' id='perf_saved_0' name='perf_saved_0' checked
onclick='savePerfSong(this, 0);'>
</th>
<td style='text-align:center;' onclick='clearSongRow(0);'>✖</td>
<td style="text-align: right;">
<input type='text' id='perf_time_0' name='perf_time_0' style='text-align:right;'
minLength='4' maxLength='7' size='7' value=''
onkeyup='changedPerfTime(this, 0);'>
</td>
<td>
<input type='text' id='perf_title_0' name='perf_title_0' style='text-align:left;'
minLength='4' maxlength='80' size='50' value=""
onkeyup='changedPerfSong(this, 0);'>
</td>
<td><input type='text' id='perf_save_0' name='perf_save_0'></td>
</tr>
</tbody>
</table>
</div>
<div class="buttons mt-5 justify-align-center d-flex justify-content-center">
<button type="button" class="btn btn-secondary " id='completeButton' type='button'
onclick='markComplete(this, 773, false);'>Mark incomplete</button>
<button type="button" class="btn btn-success" id='incompleteButton' type='button' disabled
onclick='markComplete(this, 773, true);'>Mark complete</button>
</div>
<div class="form_and_streams mt-4">
<div class="formDiv">
<form action="POST" action="/YouTube/performed.php" class="table2 ">
<table class="table mt-5">
<tbody>
<tr>
<td>
<input type='checkbox' name='filterFromDate' id='filterFromDate' checked>
<label for='filterFromDate'>Earliest date</label>
</td>
<td><input type='text' name='fromDate' id='fromDate' size=10 value='06/20/2016'>
</td>
<td>
<input type='checkbox' name='filterToDate' id='filterToDate'>
<label for='filterFromDate'>Latest date</label>
</td>
<td><input type='text' name='toDate' size=10 value=''></td>
<td>
<input type='checkbox' name='omitCompleted' id='omitCompleted' checked>
<label for='omitCompleted'>Omit if completed review</label>
</td>
</tr>
</tbody>
</table>
</form>
</div>
</div>
<div class="livestream mt-4">
<table class="table">
<thead>
<tr>
<th scope="col">Started</th>
<th scope="col">Noted</th>
<th scope="col">Duration</th>
<th scope="col">Livestream Title</th>
</tr>
</thead>
<tbody>
<tr>
<td id='livestream_date_0'>2018-12-23 17:18</td>
<td id='livestream_songCount_0'></td>
<td id='livestream_elapsed_0'>0:20:09</td>
<td>
<span
onclick='selectVidId("n3tSP_imMI", 0, "livestream_row_0", "1280", "720");'>First
Sunday</span>
</td>
</tr>
<tr>
<td id='livestream_date_1'>2018-12-24 18:16</td>
<td id='livestream_songCount_1'></td>
<td id='livestream_elapsed_1'>0:15:17</td>
<td>
<span onclick='selectVidId("qtcQtqsaTU", 1, "livestream_row_1", "1280", "720");'>
Live from the Lights Display</span>
</td>
</tr>
<tr>
<td id='livestream_date_2'>2019-01-06 07:31</td>
<td id='livestream_songCount_2'></td>
<td id='livestream_elapsed_2'>0:19:04</td>
<td><span onclick='selectVidId("c4y42xI6_o", 2, "livestream_row_2", "1280", "720");'>Jun
26
Follow the sun</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
</div>
<script src='performed.js?modified=1738374550'></script>
<script async src="https://www.youtube.com/iframe_api"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.3.0/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
crossorigin="anonymous"></script>
<script>
const CONST_IS_IPAD = '';
const CONST_IS_ANDROID = '';
const CONST_DEVICE_TYPE = 'unknown';
const CONST_HIGHLIGHT = '#FDFF47';
const CONST_LOG_WRITER = 'HTTP/1.1://web.lovelady.com/writeLog.php';
const CONST_JS_APP_NAME = 'performed.php';
const CONST_JS_LOG_NAME = '/usr/local/log/performed-2025-01.log';
const CONST_KEYWORD_LOG_ERROR = 'logError';
const CONST_NO_BACKUP = 'noBackup';
const CONST_MAX_PLAYER_WIDTH = '640';
const CONST_MAX_PLAYER_HEIGHT = '480';
const URL_SRC = 'https://web.lovelady.com/YouTube/performed.php';
let livestreamSongsComplete = true;
</script>
</body>
</html>