Trailer in home

feove · Jun 19, 2024 · 622fb8c · 622fb8c
1 parent b54d74b
commit 622fb8c
Show file tree

Hide file tree

Showing 2 changed files with 56 additions and 33 deletions.
diff --git a/index.html b/index.html
@@ -43,24 +43,22 @@ <h3>Bienvenue dans Treashunt</h3>
         <div class="video-container">
             <div class="text-left">
                 <p>N<br>O<br>T<br>R<br>E</p>
-
             </div>
-            <div class="video-container">
-                <div class="video-frame">
-                    <div id="player"></div>
+
+            <div class="video-frame">
+                <div id="player">
+
                 </div>
             </div>
-            </div>
             <div class="text-right">
                 <p>T<br>R<br>A<br>I<br>L<br>E<br>R</p>
-
             </div>
+
         </div>
 
-
 
 
-        <div class="animated-title">
+        <div class="animated-title" style="margin-top: 50%;">
             <h1>Partez à l'aventure !</h1>
         </div>
 
@@ -157,7 +155,7 @@ <h2>Qu'est ce que TreasHunt ?</h2>
         const logo = document.getElementById('logo');
         if (logo) {
             const opacity = scrollY > 550 ? 0 : 1; 
-            logo.style.top = `${scrollY *0.1}px`; 
+            //rotate the logo on itself
             logo.style.opacity = opacity;
         }
     });
@@ -183,31 +181,33 @@ <h2>Qu'est ce que TreasHunt ?</h2>
 });
     </script>
     <script>
-       var tag = document.createElement('script');
+
+
+        var tag = document.createElement('script');
         tag.src = "https://www.youtube.com/iframe_api";
         var firstScriptTag = document.getElementsByTagName('script')[0];
         firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
-        // 2. Create an <iframe> (and YouTube player) after the API code downloads.
+
         var player;
         function onYouTubeIframeAPIReady() {
             player = new YT.Player('player', {
-                height: '720',
-                width: '1080',
-                videoId: 'hZgV6ss62sE', // Your video ID
+                height: '390',
+                width: '640',
+                videoId: 'hZgV6ss62sE',
                 events: {
                     'onReady': onPlayerReady,
                     'onStateChange': onPlayerStateChange
                 }
             });
         }
 
-        // 3. The API will call this function when the video player is ready.
+
         function onPlayerReady(event) {
             event.target.playVideo();
         }
 
-        // 4. The API calls this function when the player's state changes.
+
         var done = false;
         function onPlayerStateChange(event) {
             if (event.data == YT.PlayerState.PLAYING && !done) {
@@ -217,6 +217,7 @@ <h2>Qu'est ce que TreasHunt ?</h2>
         function stopVideo() {
             player.stopVideo();
         }
+
     </script>
 </body>
 </html>
diff --git a/style/style-home.css b/style/style-home.css
@@ -528,41 +528,63 @@ section {
 }
 
 /* ---------------------VIDEO------------------------------- */
+
 .video-container {
-    margin-left: 5%;
     display: grid;
-    grid-template-columns: 1fr auto 1fr; /* Une colonne pour chaque texte et une pour la vidéo */
+    grid-template-columns: 1fr auto 1fr;
     gap: 20px;
     margin: 20px auto;
     max-width: 1200px;
-    text-align: center;
-    align-items: center; /* Centre les éléments verticalement */
-}
-.text-left, .text-right {
-    display: flex;
-    justify-content: center;
+    /* text-align: center; */
     align-items: center;
-    font-size: 3em;
+}
+
+.text-left{
+    position: absolute;
+    margin-left: -40%;
+    margin-top: 50%;
+    font-size: 3em; /* Réduire la taille du texte pour éviter le débordement */
     color: #dedede;
     text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+
+}
+.text-right {
+
+
+    position: absolute;
+    margin-left: 40%;
+    margin-top: 50%;
+    font-size: 3em; 
+    color: #dedede;
+    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
+
 }
 
 .video-frame {
-    position: relative;
+     /* Retour à la position relative pour .video-frame */
     overflow: hidden;
     border-radius: 15px;
     box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
-    margin: 0 5%;
+
+
 }
 
-.video-frame video {
-    width: 100%;
-    height: auto;
-    display: block;
-    border-radius: 15px;
-    outline: none;
+#player {
+    position: absolute;
+    top: 10%;
+    left: 15% ;
+
+    width: 70%;
+    height: 30%;
+    border: none;
 }
 
+/* Ajustement pour les tailles d'écran plus petites */
+@media (max-width: 768px) {
+    .text-left, .text-right {
+        font-size: 1.5em; /* Taille de texte réduite pour les écrans plus petits */
+    }
+}
 
 
 /* -------------------------------------------------------- */