NW6 | Zeliha Pala | Full-Stack-Project | Week-2 | Embed videos

client/src/NewVideoForm.css

@@ -1,6 +1,6 @@
 /* CSS for NewVideoForm component */
 div {
-	max-width: 500px;
+	max-width: fit-content;
 	margin: 0 auto;
 	padding: 20px;
 	border: 1px solid #ccc;
@@ -17,13 +17,12 @@ h2 {
 
 form {
 	display: flex;
-	flex-direction: column;
+	flex-wrap: wrap;
 	gap: 15px;
 }
 
 div > div {
-	display: flex;
-	flex-direction: column;
+	flex-grow: 1; /* Allow elements to grow equally to fit the container */
 }
 
 label {
@@ -33,13 +32,15 @@ label {
 }
 
 input {
+	width: 100%; /* Make inputs fill the available space */
 	padding: 10px;
 	border: 1px solid #ccc;
 	border-radius: 5px;
 	font-size: 16px;
 }
 
 button {
+	width: 100%; /* Make button fill the available space */
 	padding: 10px 20px;
 	border: none;
 	border-radius: 5px;

client/src/VideoRecommendations.css

@@ -1,27 +1,31 @@
-:root {
-	max-width: 95%;
-	margin: auto;
-}
-
 .video-list {
-	display: grid;
-	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+	display: flex;
+	flex-wrap: wrap;
+	justify-content: space-between;
 	gap: 20px;
 }
 
 .video {
+	width: calc(50% - 20px); /* Adjust width of each video */
 	border: 1px solid #ccc;
 	border-radius: 10px;
-	padding: 20px;
+	overflow: hidden; /* Ensure video containers don't overflow */
 	background-color: #f9f9f9;
 	font-family: Arial, sans-serif;
 }
 
+.video iframe {
+	width: 100%;
+	height: 200px; /* Adjust height of each video */
+	border: none;
+}
+
 a {
+	display: block;
+	padding: 20px;
 	color: #007bff;
-	/* text-decoration: none; */
 	font-family: Arial, sans-serif;
-	margin-bottom: 20px;
+	text-decoration: none;
 }
 
 a:hover {

client/src/VideoRecommendations.jsx

@@ -21,18 +21,35 @@ const VideoList = () => {
 			});
 	}, []);
 
+	function changeYTLinkToEmbed(watchLink) {
+		const embedLink = watchLink.replace("watch?v=", "embed/");
+		return embedLink;
+	}
+
 	return (
 		<div className="video-list">
-			{videos.map((videoData, i) => (
-				<div className="video" data-testid="video" key={i}>
-					<div>
-						{/* <a>{videoData.title}</a> */}
-						<a href={videoData.src}>{videoData.title}</a>
+			{videos.map((videoData, i) => {
+				const embededLink = changeYTLinkToEmbed(videoData.src);
+				return (
+					<div className="video" data-testid="video" key={i}>
+						<div>
+							<iframe
+								title={videoData.title}
+								width="560"
+								height="315"
+								src={embededLink}
+								frameBorder="0"
+								allowFullScreen
+							></iframe>
+						</div>
 					</div>
-				</div>
-			))}
+				);
+			})}
 		</div>
 	);
+	() => {
+		return askxjsnj;
+	};
 };
 
 export default VideoList;