Embed Video Updated

RbAvci · May 26, 2024 · f9089a2 · f9089a2
1 parent baef03d
commit f9089a2
Show file tree

Hide file tree

Showing 3 changed files with 38 additions and 17 deletions.
diff --git a/client/src/NewVideoForm.css b/client/src/NewVideoForm.css
@@ -28,8 +28,9 @@
 
 .input-group input {
 	width: 100%;
-	padding: 8px;
-	box-sizing: border-box;
+	padding: 10px;
+	border: 1px solid #ddd;
+	border-radius: 5px;
 }
 
 .submit-button {

diff --git a/client/src/VideoRecommendations.css b/client/src/VideoRecommendations.css
@@ -36,3 +36,7 @@
 .video-title a:hover {
 	text-decoration: underline;
 }
+.video-item iframe {
+	width: 100%; /* İframe'in genişliğini % olarak ayarlayın */
+	height: 100%; /* İframe'in yüksekliğini % olarak ayarlayın */
+}
diff --git a/client/src/VideoRecommendations.jsx b/client/src/VideoRecommendations.jsx
@@ -3,6 +3,7 @@ import "./VideoRecommendations.css";
 import DeleteVideoRecommendation from "./DeleteVideoRecommendation";
 import NewVideoForm from "./NewVideoForm.jsx";
 import RatingDisplay from "./RatingDisplay.jsx";
+
 const VideoList = () => {
 	const [videos, setVideos] = useState([]);
 
@@ -37,25 +38,40 @@ const VideoList = () => {
 		setVideos(updatedVideos);
 	};
 
+	function changeYTLinkToEmbed(watchLink) {
+		return watchLink.replace("watch?v=", "embed/");
+	}
+
 	return (
 		<div className="video-list-container">
 			<div className="video-list">
-				{videos.map((videoData, i) => (
-					<div className="video-item" data-testid="video" key={i}>
-						<div className="video-title">
-							<a href={videoData.src}>{videoData.title}</a>
+				{videos.map((videoData, i) => {
+					const embedLink = changeYTLinkToEmbed(videoData.src);
+					return (
+						<div className="video-item" data-testid="video" key={i}>
+							<div className="video-title">{videoData.title}</div>
+							<div className="video-frame">
+								<iframe
+									title={videoData.title}
+									width="560"
+									height="315"
+									src={embedLink}
+									frameBorder="0"
+									allowFullScreen
+								></iframe>
+							</div>
+							<DeleteVideoRecommendation
+								videoId={videoData.id}
+								onDelete={handleDelete}
+							/>
+							<RatingDisplay
+								videoId={videoData.id}
+								rating={videoData.rating}
+								onUpdate={handleRatingUpdate}
+							/>
 						</div>
-						<DeleteVideoRecommendation
-							videoId={videoData.id}
-							onDelete={handleDelete}
-						/>
-						<RatingDisplay
-							videoId={videoData.id}
-							rating={videoData.rating}
-							onUpdate={handleRatingUpdate}
-						/>
-					</div>
-				))}
+					);
+				})}
 			</div>
 			<NewVideoForm onSubmit={fetchVideos} />
 		</div>