Update index.html

index.html

@@ -485,8 +485,73 @@ <h2>Wiki updates</h2>
 
 			</div><!-- homeGridRightCol -->
 		</div><!-- homeGridContainer -->
+
+		<div class="" id="trailerOverlayWindowMainDiv">
+			<div class="" id="trailerOverlayWindowContainer">
+				<div id="overlayWindowTitle">Game trailer</div>
+				<!-- <img src="/assets/images/maps/overworld.jpg" alt="" id="testrailerimg"> -->
+				<iframe src="/misc/eos-trailer/" frameborder="0" id="EOFSTrailerFrame"></iframe>
+			</div>
+		</div>
+
+		<style>
+			#trailerOverlayWindowMainDiv
+			{
+				background: black;
+				color: white;
+
+				padding: 6px;
+				border-radius: 10px;
+
+				width: 	320px;
+				max-height: 240px;
+				max-width: 25%;
+				/* max-height: auto; */
+				aspect-ratio: 16/9;
+
+				position: fixed;
+				right:  15px;
+				bottom: 15px;
+				z-index: 5;
+			}
+			#trailerOverlayWindowContainer
+			{
+				background: black;
+				color: white;
+				/* padding: 5px; */
+				border-radius: 10px;
+			}
+			#overlayWindowTitle
+			{
+				display: none;
+
+				padding: 10px;
+				font-size: 1.2rem;
+				font-weight: 600;
+			}
+
+			#testrailerimg
+			{
+				/* border-radius: 10px; */
+				width: 100%;
+				height: 100%;
+			}
+
+			#EOFSTrailerFrame
+			{
+				width: 100%;
+				height: auto;
+				aspect-ratio: 16/9;
+				/* max-height: 400px; */
+				border-radius: 10px;
+				overflow: hidden;   
+				margin-bottom: -5px;
+			}
+		</style>
     </body>
+
 	<script src="/assets/scripts/pageBuilder.js"></script>
     <script>BuildPage(true); </script>
+	<script src="/assets/scripts/trailer.js"></script>
 	 <!-- milliseconds = 1000; setTimeout(() => {  }, milliseconds); </script> -->
 </html>