GYFX35 · GYFX35 · Jan 18, 2026 · Jan 18, 2026
diff --git a/eco_project/backend/.env.example b/eco_project/backend/.env.example
@@ -0,0 +1 @@
+YOUTUBE_API_KEY=
diff --git a/eco_project/backend/app.py b/eco_project/backend/app.py
@@ -657,6 +657,38 @@ def uploaded_file(filename):
 def handle_chat_message(message):
     emit('chat_message', message, broadcast=True)
 
+
+from googleapiclient.discovery import build
+
+@app.route('/api/youtube_videos')
+def youtube_videos():
+    youtube_api_key = os.environ.get('YOUTUBE_API_KEY')
+    if not youtube_api_key:
+        return jsonify({"error": "YouTube API key is not configured."}), 500
+
+    try:
+        youtube = build('youtube', 'v3', developerKey=youtube_api_key)
+
+        search_response = youtube.search().list(
+            q="environmental protection",
+            part="snippet",
+            maxResults=10,
+            type="video"
+        ).execute()
+
+        videos = []
+        for search_result in search_response.get("items", []):
+            videos.append({
+                "title": search_result["snippet"]["title"],
+                "video_id": search_result["id"]["videoId"]
+            })
+
+        return jsonify(videos)
+
+    except Exception as e:
+        return jsonify({"error": str(e)}), 500
+
+
 if __name__ == '__main__':
     port = int(os.environ.get("PORT", 8080))
     socketio.run(app, host='0.0.0.0', port=port, debug=False, allow_unsafe_werkzeug=True)
diff --git a/eco_project/backend/requirements.txt b/eco_project/backend/requirements.txt
@@ -3,3 +3,4 @@ requests
 gunicorn
 google-cloud-logging
 Flask-SocketIO
+google-api-python-client
diff --git a/eco_project/backend/static/index.html b/eco_project/backend/static/index.html
@@ -52,6 +52,7 @@ <h2>Community</h2>
             <p>Share your ideas and connect with others.</p>
             <ul>
                 <li><a href="videos.html">Watch Videos</a></li>
+                <li><a href="youtube.html">Watch YouTube Videos</a></li>
                 <li><a href="camera.html">Publish Videos/Photos</a></li>
                 <li><a href="forest_seeds.html">Forest Seeds Promotion</a></li>
                 <li><a href="chat.html">Join the Chat</a></li>

diff --git a/eco_project/backend/static/youtube.css b/eco_project/backend/static/youtube.css
@@ -0,0 +1,23 @@
+.video-container {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: space-around;
+    padding: 20px;
+}
+
+.video-item {
+    width: 300px;
+    margin: 15px;
+    border: 1px solid #ccc;
+    box-shadow: 0 0 5px rgba(0,0,0,0.1);
+}
+
+.video-item iframe {
+    width: 100%;
+    height: 170px;
+}
+
+.video-item-title {
+    padding: 10px;
+    font-weight: bold;
+}
diff --git a/eco_project/backend/static/youtube.html b/eco_project/backend/static/youtube.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>YouTube Videos - Environment Protection</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="youtube.css">
+</head>
+<body>
+    <header>
+        <h1>YouTube Video Gallery</h1>
+        <nav>
+            <a href="index.html">Home</a>
+        </nav>
+    </header>
+    <main>
+        <section id="videos">
+            <h2>Featured Videos</h2>
+            <div class="video-container">
+                <!-- Video embeds will go here -->
+            </div>
+        </section>
+    </main>
+    <footer>
+        <p>&copy; 2025 Environment Protection Initiative</p>
+    </footer>
+    <script src="youtube.js"></script>
+</body>
+</html>
diff --git a/eco_project/backend/static/youtube.js b/eco_project/backend/static/youtube.js
@@ -0,0 +1,36 @@
+document.addEventListener('DOMContentLoaded', () => {
+    const videoContainer = document.querySelector('.video-container');
+
+    async function fetchVideos() {
+        try {
+            const response = await fetch('/api/youtube_videos');
+            if (!response.ok) {
+                throw new Error(`HTTP error! status: ${response.status}`);
+            }
+            const videos = await response.json();
+            displayVideos(videos);
+        } catch (error) {
+            videoContainer.innerHTML = `<p>Error fetching videos: ${error.message}</p>`;
+        }
+    }
+
+    function displayVideos(videos) {
+        if (videos.length === 0) {
+            videoContainer.innerHTML = '<p>No videos to display.</p>';
+            return;
+        }
+        let html = '';
+        videos.forEach(video => {
+            const embedUrl = `https://www.youtube.com/embed/${video.video_id}`;
+            html += `
+                <div class="video-item">
+                    <iframe src="${embedUrl}" frameborder="0" allowfullscreen></iframe>
+                    <div class="video-item-title">${video.title}</div>
+                </div>
+            `;
+        });
+        videoContainer.innerHTML = html;
+    }
+
+    fetchVideos();
+});