[Docs Site] Wrap Stream component in div (#24042)

Author: KianNH

src/components/Stream.astro

@@ -39,66 +39,68 @@ if (thumbnail) {
 }
 ---
 
-<stream-player data-id={id} data-title={title}>
-	<div style="position: relative; padding-top: 56.25%">
-		<iframe
-			src={url.toString()}
-			style="border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;"
-			allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
-			allowfullscreen="true"
-			title={title}
-			id={id}></iframe>
-	</div>
-
-	{
-		chapters && (
-			<p>
-				<strong>Chapters</strong>
-				<ul class="flex list-none gap-4 overflow-x-scroll pb-4 pl-0">
-					{Object.entries(chapters).map(([chapter, time]) => {
-						const totalSeconds = parse(time, "s");
-
-						const thumbnail = new URL(thumbnailUrl);
-						thumbnail.searchParams.set("fit", "crop");
-						thumbnail.searchParams.set("time", `${totalSeconds}s`);
-
-						return (
-							<li class="mt-0!">
-								<button
-									class="flex h-full w-36 cursor-pointer flex-col rounded-sm border border-gray-200 bg-transparent p-4 dark:border-gray-700"
-									data-chapter={chapter}
-									data-time={totalSeconds}
-								>
-									<img
-										src={thumbnail.toString()}
-										alt={chapter}
-										width="120"
-										height="64"
-										class="border-accent bg-accent/10 rounded-sm border"
-									/>
-									<div class="flex h-full flex-col items-center justify-between">
-										<strong class="line-clamp-2 text-xs" title={chapter}>
-											{chapter}
-										</strong>
-										<Badge text={time} variant="tip" class="w-fit" />
-									</div>
-								</button>
-							</li>
-						);
-					})}
-				</ul>
-			</p>
-		)
-	}
+<div>
+	<stream-player data-id={id} data-title={title}>
+		<div style="position: relative; padding-top: 56.25%">
+			<iframe
+				src={url.toString()}
+				style="border: none; position: absolute; top: 0; left: 0; height: 100%; width: 100%;"
+				allow="accelerometer; gyroscope; autoplay; encrypted-media; picture-in-picture;"
+				allowfullscreen="true"
+				title={title}
+				id={id}></iframe>
+		</div>
+
+		{
+			chapters && (
+				<p>
+					<strong>Chapters</strong>
+					<ul class="flex list-none gap-4 overflow-x-scroll pb-4 pl-0">
+						{Object.entries(chapters).map(([chapter, time]) => {
+							const totalSeconds = parse(time, "s");
+
+							const thumbnail = new URL(thumbnailUrl);
+							thumbnail.searchParams.set("fit", "crop");
+							thumbnail.searchParams.set("time", `${totalSeconds}s`);
+
+							return (
+								<li class="mt-0!">
+									<button
+										class="flex h-full w-36 cursor-pointer flex-col rounded-sm border border-gray-200 bg-transparent p-4 dark:border-gray-700"
+										data-chapter={chapter}
+										data-time={totalSeconds}
+									>
+										<img
+											src={thumbnail.toString()}
+											alt={chapter}
+											width="120"
+											height="64"
+											class="border-accent bg-accent/10 rounded-sm border"
+										/>
+										<div class="flex h-full flex-col items-center justify-between">
+											<strong class="line-clamp-2 text-xs" title={chapter}>
+												{chapter}
+											</strong>
+											<Badge text={time} variant="tip" class="w-fit" />
+										</div>
+									</button>
+								</li>
+							);
+						})}
+					</ul>
+				</p>
+			)
+		}
 
-	{
-		showMoreVideos && (
-			<a href="https://www.youtube.com/@CloudflareDevelopers" target="_blank">
-				Watch more videos on our Developer Channel
-			</a>
-		)
-	}
-</stream-player>
+		{
+			showMoreVideos && (
+				<a href="https://www.youtube.com/@CloudflareDevelopers" target="_blank">
+					Watch more videos on our Developer Channel
+				</a>
+			)
+		}
+	</stream-player>
+</div>
 
 <script is:inline src="https://embed.cloudflarestream.com/embed/sdk.latest.js"
 ></script>