Have thumbnails of remaining videos showing underneath playing video - php

Question

What I am trying to do is something like below:
The buttons at the side can be ignored. So the idea is that the big square is the main video playing and the little ones underneath will be the thumbnails of the remaining videos. The main video playing is randomly picked when the site is loaded and then the ones that are not playing, the thumbnails will be shown underneath. I am doing this like so:
<?php
try {
$items = array();
$stmt = $dbconn->query('SELECT videoid, video, thumbnail, videotitle, tags, editedby FROM videos ORDER BY RAND()');
while($row = $stmt->fetch()){
$video = $row['video'];
$videoThumbnail = $row['thumbnail'];
$videoTitle = $row['videotitle'];
echo $video;
array_push($items, $video);
$video = $row['video'];
}
shuffle($items);
$restVideos = array();
foreach($items as $key => $videoArray) {
if($key === 0) continue;
array_push($restVideos, $videoArray);
}
}catch(PDOException $e) {
echo $e->getMessage();
}
?>
<video id=v controls loop align="right">
<source src="users/videos/<?php echo $items[0];?>" type="video/mp4">
</video>
<?php
$thumbnails = array();
$videoTitles = array();
foreach($restVideos as $videoThumbnail) {
try {
$stmt = $dbconn->query("SELECT thumbnail, videoTitle FROM videos WHERE video = '$videoThumbnail'");
while($row = $stmt->fetch()){
$thumbnail = $row['thumbnail'];
array_push($thumbnails, $thumbnail);
}
}catch(PDOException $e) {
echo $e->getMessage();
}
}
foreach($thumbnails as $nonPlaying) {
?>
<img src=<?php echo $nonPlaying ?> id="thumbnails" width="200" height="100">
<?php } ?>
what is happening at the moment is below:
Each image is just stacking up against each other how can I change it so this is not the case?
Also is there a more efficient way of doing this than what I am currently doing?
Edit:
$thumbnails = array();
$videoTitles = array();
$test = 700;
echo "<div>";
foreach($restVideos as $rVideo) {
$test = 200 + $test;
?>
<img src=<?php echo $videoMap[$rVideo]['thumbnail'] ?> id="thumbnails" width="200" height="100" style= "left: <?php echo $test?>px">
<?php
echo "</div>";
}

Answer 1

You not required to two query two times to db .
Use key value and store the entire video. While printing thumbnail based on the key (unique id ex. videoid). You can retrieve the content when you print the thumbnail list and can avoid querying again in a loop.
Ref to code snipp
<?php
try {
$items = array();
$stmt = $dbconn->query('SELECT videoid, video, thumbnail, videotitle, tags, editedby FROM videos ORDER BY RAND()');
while($row = $stmt->fetch()){
$video = $row['video'];
$videoMap[$row['videoid']] = $row;
$videoThumbnail = $row['thumbnail'];
$videoTitle = $row['videotitle'];
if (count($items) == 0) echo $video;
array_push($items, $row['videoid']);
$video = $row['video'];
}
shuffle($items);
$restVideos = array();
foreach($items as $key => $videoArray) {
if($key === 0) continue;
array_push($restVideos, $videoArray);
}
}catch(PDOException $e) {
echo $e->getMessage();
}
?>
<video id=v controls loop align="right">
<source src="users/videos/<?php echo $videoMap[$items[0]]['video'];?>" type="video/mp4">
</video>
<?php
$thumbnails = array();
$videoTitles = array();
echo "<div>";
foreach($restVideos as $rVideo) {
?>
<img src=<?php echo $videoMap[$rVideo]['thumbnail'] ?> id="thumbnails" width="200" height="100">
<?php
}
echo "</div>";
}
?>
Use a div tag and print the image thumbnails.