more optimizations and fixes

index.html

@@ -32,7 +32,7 @@
 
 		<!-- organizational information tags -->
 		<meta name="date" content="2020-10-10T13:30:00+01:25">
-		<meta name="revised" content="Saturday, September 07th, 2024, 04:30 pm">
+		<meta name="revised" content="Saturday, September 07th, 2024, 05:45 pm">
 		<meta name="author" content="mexikoedi">
 		<meta name="creator" content="mexikoedi">
 		<meta name="owner" content="mexikoedi">
@@ -147,7 +147,7 @@ <h1 class="display-4 p-5">mexikoedi</h1>
 				<h2 class="p-3">Demonstrations</h2>
 				<p class="mb-4">A collection of YouTube videos that showcase my various projects.</p>
 				<div class="ratio ratio-21x9">
-					<iframe src="https://www.youtube-nocookie.com/embed/videoseries?list=PLxlcWgkzKADwTTHndYpfcLT0OTfWrH0Zo" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
+					<iframe data-src="https://www.youtube-nocookie.com/embed/videoseries?list=PLxlcWgkzKADwTTHndYpfcLT0OTfWrH0Zo" title="YouTube video player" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen loading="lazy"></iframe>
 				</div>
 			</div>
 		</section>
@@ -347,9 +347,23 @@ <h2 class="p-3">About</h2>
 			<p>&copy; 2020-<span id="currentYear"></span> mexikoedi. All rights reserved.</p>
 		</footer>
 
-		<!-- bootstrap import and scrolling listener for navbar -->
+		<!-- bootstrap import, scrolling listener for navbar and current year -->
 		<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
 		<script>
+			document.addEventListener('DOMContentLoaded', function () {
+				const iframe = document.querySelector('iframe');
+				const observer = new IntersectionObserver((entries, observer) => {
+					entries.forEach(entry => {
+						if (entry.isIntersecting) {
+							iframe.src = iframe.dataset.src;
+							observer.unobserve(entry.target);
+						}
+					});
+				});
+
+				observer.observe(iframe);
+			});
+
 			document.addEventListener('DOMContentLoaded', function () {
 				var scrollSpy = new bootstrap.ScrollSpy(document.body, {
 					target: '#navbarNav'
@@ -367,8 +381,7 @@ <h2 class="p-3">About</h2>
 				window.addEventListener('touchmove', function () {
 				}, { passive: true });
 			});
-		</script>
-		<script>
+
 			document.addEventListener('DOMContentLoaded', function () {
 				document.getElementById('currentYear').textContent = new Date().getFullYear();
 			});

style.css

@@ -3,7 +3,7 @@
 	font-style: normal;
 	font-weight: 700;
 	font-display: swap;
-	src: url(https://fonts.gstatic.com/s/montserrat/v24/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jq0N6WXh0pg.woff2) format('woff2');
+    src: local('Montserrat'), url(https://fonts.gstatic.com/s/montserrat/v24/JTUFjIg1_i6t8kCHKm459Wx7xQYXK0vOoz6jq0N6WXh0pg.woff2) format('woff2');
 }
 
 html {