diff --git a/music/albums1994.html b/music/albums1994.html
index aa99adb1e..30909d30c 100644
--- a/music/albums1994.html
+++ b/music/albums1994.html
@@ -174,14 +174,14 @@ <h3>1994 Albums</h3><span class="fo-5">Discover the top-charting music albums ac
     </div></div>
 
 <!-- Modal Structure -->
-<div id="wikiModal" class="modal">
+<div id="modal" class="modal">
   <div class="modal-content">
     <div class="modal-header">
-      <h5 class="modal-title">Article or Video</h5>
+      <h5 class="modal-title">Content Viewer</h5>
       <button class="close-btn" id="closeModal">&times;</button>
     </div>
     <div class="modal-body">
-      <iframe id="wikiIframe" src="" allowfullscreen></iframe> <!-- Added allowfullscreen -->
+      <iframe id="contentIframe" src="" allowfullscreen allow="encrypted-media"></iframe>
     </div>
     <div class="modal-footer">
       <button class="close-btn" id="closeFooter">Close</button>
@@ -190,10 +190,10 @@ <h5 class="modal-title">Article or Video</h5>
 </div>
 
 <script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"]');
-    const modal = document.getElementById('wikiModal');
-    const iframe = document.getElementById('wikiIframe');
+  document.addEventListener('DOMContentLoaded', function () {
+    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"], a[href*="spotify"]');
+    const modal = document.getElementById('modal');
+    const iframe = document.getElementById('contentIframe');
     const closeModalButtons = document.querySelectorAll('#closeModal, #closeFooter');
 
     // Function to adjust iframe height
@@ -202,7 +202,7 @@ <h5 class="modal-title">Article or Video</h5>
       const headerHeight = document.querySelector('.modal-header').offsetHeight;
       const footerHeight = document.querySelector('.modal-footer').offsetHeight;
       const modalHeight = modalContent.offsetHeight;
-      
+
       // Set iframe height based on the remaining space
       const iframeHeight = modalHeight - headerHeight - footerHeight - 40; // 40px for padding
       iframe.style.height = iframeHeight + 'px';
@@ -210,39 +210,29 @@ <h5 class="modal-title">Article or Video</h5>
 
     // Open modal and set iframe source on click
     links.forEach(link => {
-      link.addEventListener('click', function(event) {
+      link.addEventListener('click', function (event) {
         event.preventDefault();
         const url = this.href;
 
-        if (url.includes('wikipedia')) {
+        if (url.includes('wikipedia') || url.includes('youtube') || url.includes('spotify')) {
           iframe.src = url;
-        } else if (url.includes('youtube.com')) {
-          if (url.includes('embed/videoseries')) {
-            iframe.src = url; // Playlist
-          } else {
-            const videoId = url.split('v=')[1]?.split('&')[0];
-            iframe.src = `https://www.youtube.com/embed/${videoId}`; // Video
-          }
-        } else if (url.includes('spotify.com')) {
-          const spotifyUrl = url.replace('open.spotify.com', 'embed.spotify.com');
-          iframe.src = spotifyUrl;
         }
 
-        modal.style.display = 'flex'; // Show modal (flex layout for centering)
+        modal.style.display = 'flex'; // Show modal
         adjustIframeHeight(); // Adjust iframe height on modal open
       });
     });
 
     // Close modal and clear iframe content
     closeModalButtons.forEach(button => {
-      button.addEventListener('click', function() {
+      button.addEventListener('click', function () {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
       });
     });
 
     // Close modal when clicking outside modal content
-    modal.addEventListener('click', function(event) {
+    modal.addEventListener('click', function (event) {
       if (event.target === modal) {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
diff --git a/music/albums1998.html b/music/albums1998.html
index 27edddfe4..3b7fd638f 100644
--- a/music/albums1998.html
+++ b/music/albums1998.html
@@ -173,14 +173,14 @@ <h3>1998 Albums</h3><span class="fo-5">Discover the top-charting music albums ac
     </div></div>
 
 <!-- Modal Structure -->
-<div id="wikiModal" class="modal">
+<div id="modal" class="modal">
   <div class="modal-content">
     <div class="modal-header">
-      <h5 class="modal-title">Article or Video</h5>
+      <h5 class="modal-title">Content Viewer</h5>
       <button class="close-btn" id="closeModal">&times;</button>
     </div>
     <div class="modal-body">
-      <iframe id="wikiIframe" src="" allowfullscreen></iframe> <!-- Added allowfullscreen -->
+      <iframe id="contentIframe" src="" allowfullscreen allow="encrypted-media"></iframe>
     </div>
     <div class="modal-footer">
       <button class="close-btn" id="closeFooter">Close</button>
@@ -189,10 +189,10 @@ <h5 class="modal-title">Article or Video</h5>
 </div>
 
 <script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"]');
-    const modal = document.getElementById('wikiModal');
-    const iframe = document.getElementById('wikiIframe');
+  document.addEventListener('DOMContentLoaded', function () {
+    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"], a[href*="spotify"]');
+    const modal = document.getElementById('modal');
+    const iframe = document.getElementById('contentIframe');
     const closeModalButtons = document.querySelectorAll('#closeModal, #closeFooter');
 
     // Function to adjust iframe height
@@ -201,7 +201,7 @@ <h5 class="modal-title">Article or Video</h5>
       const headerHeight = document.querySelector('.modal-header').offsetHeight;
       const footerHeight = document.querySelector('.modal-footer').offsetHeight;
       const modalHeight = modalContent.offsetHeight;
-      
+
       // Set iframe height based on the remaining space
       const iframeHeight = modalHeight - headerHeight - footerHeight - 40; // 40px for padding
       iframe.style.height = iframeHeight + 'px';
@@ -209,39 +209,29 @@ <h5 class="modal-title">Article or Video</h5>
 
     // Open modal and set iframe source on click
     links.forEach(link => {
-      link.addEventListener('click', function(event) {
+      link.addEventListener('click', function (event) {
         event.preventDefault();
         const url = this.href;
 
-        if (url.includes('wikipedia')) {
+        if (url.includes('wikipedia') || url.includes('youtube') || url.includes('spotify')) {
           iframe.src = url;
-        } else if (url.includes('youtube.com')) {
-          if (url.includes('embed/videoseries')) {
-            iframe.src = url; // Playlist
-          } else {
-            const videoId = url.split('v=')[1]?.split('&')[0];
-            iframe.src = `https://www.youtube.com/embed/${videoId}`; // Video
-          }
-        } else if (url.includes('spotify.com')) {
-          const spotifyUrl = url.replace('open.spotify.com', 'embed.spotify.com');
-          iframe.src = spotifyUrl;
         }
 
-        modal.style.display = 'flex'; // Show modal (flex layout for centering)
+        modal.style.display = 'flex'; // Show modal
         adjustIframeHeight(); // Adjust iframe height on modal open
       });
     });
 
     // Close modal and clear iframe content
     closeModalButtons.forEach(button => {
-      button.addEventListener('click', function() {
+      button.addEventListener('click', function () {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
       });
     });
 
     // Close modal when clicking outside modal content
-    modal.addEventListener('click', function(event) {
+    modal.addEventListener('click', function (event) {
       if (event.target === modal) {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
diff --git a/music/albums2002.html b/music/albums2002.html
index fb5fb7efd..934f8705a 100644
--- a/music/albums2002.html
+++ b/music/albums2002.html
@@ -173,14 +173,14 @@ <h3>2002 Albums</h3><span class="fo-5">Discover the top-charting music albums ac
     </div></div>
 
 <!-- Modal Structure -->
-<div id="wikiModal" class="modal">
+<div id="modal" class="modal">
   <div class="modal-content">
     <div class="modal-header">
-      <h5 class="modal-title">Article or Video</h5>
+      <h5 class="modal-title">Content Viewer</h5>
       <button class="close-btn" id="closeModal">&times;</button>
     </div>
     <div class="modal-body">
-      <iframe id="wikiIframe" src="" allowfullscreen></iframe> <!-- Added allowfullscreen -->
+      <iframe id="contentIframe" src="" allowfullscreen allow="encrypted-media"></iframe>
     </div>
     <div class="modal-footer">
       <button class="close-btn" id="closeFooter">Close</button>
@@ -189,10 +189,10 @@ <h5 class="modal-title">Article or Video</h5>
 </div>
 
 <script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"]');
-    const modal = document.getElementById('wikiModal');
-    const iframe = document.getElementById('wikiIframe');
+  document.addEventListener('DOMContentLoaded', function () {
+    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"], a[href*="spotify"]');
+    const modal = document.getElementById('modal');
+    const iframe = document.getElementById('contentIframe');
     const closeModalButtons = document.querySelectorAll('#closeModal, #closeFooter');
 
     // Function to adjust iframe height
@@ -201,7 +201,7 @@ <h5 class="modal-title">Article or Video</h5>
       const headerHeight = document.querySelector('.modal-header').offsetHeight;
       const footerHeight = document.querySelector('.modal-footer').offsetHeight;
       const modalHeight = modalContent.offsetHeight;
-      
+
       // Set iframe height based on the remaining space
       const iframeHeight = modalHeight - headerHeight - footerHeight - 40; // 40px for padding
       iframe.style.height = iframeHeight + 'px';
@@ -209,39 +209,29 @@ <h5 class="modal-title">Article or Video</h5>
 
     // Open modal and set iframe source on click
     links.forEach(link => {
-      link.addEventListener('click', function(event) {
+      link.addEventListener('click', function (event) {
         event.preventDefault();
         const url = this.href;
 
-        if (url.includes('wikipedia')) {
+        if (url.includes('wikipedia') || url.includes('youtube') || url.includes('spotify')) {
           iframe.src = url;
-        } else if (url.includes('youtube.com')) {
-          if (url.includes('embed/videoseries')) {
-            iframe.src = url; // Playlist
-          } else {
-            const videoId = url.split('v=')[1]?.split('&')[0];
-            iframe.src = `https://www.youtube.com/embed/${videoId}`; // Video
-          }
-        } else if (url.includes('spotify.com')) {
-          const spotifyUrl = url.replace('open.spotify.com', 'embed.spotify.com');
-          iframe.src = spotifyUrl;
         }
 
-        modal.style.display = 'flex'; // Show modal (flex layout for centering)
+        modal.style.display = 'flex'; // Show modal
         adjustIframeHeight(); // Adjust iframe height on modal open
       });
     });
 
     // Close modal and clear iframe content
     closeModalButtons.forEach(button => {
-      button.addEventListener('click', function() {
+      button.addEventListener('click', function () {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
       });
     });
 
     // Close modal when clicking outside modal content
-    modal.addEventListener('click', function(event) {
+    modal.addEventListener('click', function (event) {
       if (event.target === modal) {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
diff --git a/music/albums2003.html b/music/albums2003.html
index cff3ca86a..4feb260f9 100644
--- a/music/albums2003.html
+++ b/music/albums2003.html
@@ -173,14 +173,14 @@ <h3>2003 Albums</h3><span class="fo-5">Discover the top-charting music albums ac
     </div></div>
 
 <!-- Modal Structure -->
-<div id="wikiModal" class="modal">
+<div id="modal" class="modal">
   <div class="modal-content">
     <div class="modal-header">
-      <h5 class="modal-title">Article or Video</h5>
+      <h5 class="modal-title">Content Viewer</h5>
       <button class="close-btn" id="closeModal">&times;</button>
     </div>
     <div class="modal-body">
-      <iframe id="wikiIframe" src="" allowfullscreen></iframe> <!-- Added allowfullscreen -->
+      <iframe id="contentIframe" src="" allowfullscreen allow="encrypted-media"></iframe>
     </div>
     <div class="modal-footer">
       <button class="close-btn" id="closeFooter">Close</button>
@@ -189,10 +189,10 @@ <h5 class="modal-title">Article or Video</h5>
 </div>
 
 <script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"]');
-    const modal = document.getElementById('wikiModal');
-    const iframe = document.getElementById('wikiIframe');
+  document.addEventListener('DOMContentLoaded', function () {
+    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"], a[href*="spotify"]');
+    const modal = document.getElementById('modal');
+    const iframe = document.getElementById('contentIframe');
     const closeModalButtons = document.querySelectorAll('#closeModal, #closeFooter');
 
     // Function to adjust iframe height
@@ -201,7 +201,7 @@ <h5 class="modal-title">Article or Video</h5>
       const headerHeight = document.querySelector('.modal-header').offsetHeight;
       const footerHeight = document.querySelector('.modal-footer').offsetHeight;
       const modalHeight = modalContent.offsetHeight;
-      
+
       // Set iframe height based on the remaining space
       const iframeHeight = modalHeight - headerHeight - footerHeight - 40; // 40px for padding
       iframe.style.height = iframeHeight + 'px';
@@ -209,39 +209,29 @@ <h5 class="modal-title">Article or Video</h5>
 
     // Open modal and set iframe source on click
     links.forEach(link => {
-      link.addEventListener('click', function(event) {
+      link.addEventListener('click', function (event) {
         event.preventDefault();
         const url = this.href;
 
-        if (url.includes('wikipedia')) {
+        if (url.includes('wikipedia') || url.includes('youtube') || url.includes('spotify')) {
           iframe.src = url;
-        } else if (url.includes('youtube.com')) {
-          if (url.includes('embed/videoseries')) {
-            iframe.src = url; // Playlist
-          } else {
-            const videoId = url.split('v=')[1]?.split('&')[0];
-            iframe.src = `https://www.youtube.com/embed/${videoId}`; // Video
-          }
-        } else if (url.includes('spotify.com')) {
-          const spotifyUrl = url.replace('open.spotify.com', 'embed.spotify.com');
-          iframe.src = spotifyUrl;
         }
 
-        modal.style.display = 'flex'; // Show modal (flex layout for centering)
+        modal.style.display = 'flex'; // Show modal
         adjustIframeHeight(); // Adjust iframe height on modal open
       });
     });
 
     // Close modal and clear iframe content
     closeModalButtons.forEach(button => {
-      button.addEventListener('click', function() {
+      button.addEventListener('click', function () {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
       });
     });
 
     // Close modal when clicking outside modal content
-    modal.addEventListener('click', function(event) {
+    modal.addEventListener('click', function (event) {
       if (event.target === modal) {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
diff --git a/music/albums2004.html b/music/albums2004.html
index bd7181d3f..5cf4927be 100644
--- a/music/albums2004.html
+++ b/music/albums2004.html
@@ -173,14 +173,14 @@ <h3>2004 Albums</h3><span class="fo-5">Discover the top-charting music albums ac
     </div></div>
 
 <!-- Modal Structure -->
-<div id="wikiModal" class="modal">
+<div id="modal" class="modal">
   <div class="modal-content">
     <div class="modal-header">
-      <h5 class="modal-title">Article or Video</h5>
+      <h5 class="modal-title">Content Viewer</h5>
       <button class="close-btn" id="closeModal">&times;</button>
     </div>
     <div class="modal-body">
-      <iframe id="wikiIframe" src="" allowfullscreen></iframe> <!-- Added allowfullscreen -->
+      <iframe id="contentIframe" src="" allowfullscreen allow="encrypted-media"></iframe>
     </div>
     <div class="modal-footer">
       <button class="close-btn" id="closeFooter">Close</button>
@@ -189,10 +189,10 @@ <h5 class="modal-title">Article or Video</h5>
 </div>
 
 <script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"]');
-    const modal = document.getElementById('wikiModal');
-    const iframe = document.getElementById('wikiIframe');
+  document.addEventListener('DOMContentLoaded', function () {
+    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"], a[href*="spotify"]');
+    const modal = document.getElementById('modal');
+    const iframe = document.getElementById('contentIframe');
     const closeModalButtons = document.querySelectorAll('#closeModal, #closeFooter');
 
     // Function to adjust iframe height
@@ -201,7 +201,7 @@ <h5 class="modal-title">Article or Video</h5>
       const headerHeight = document.querySelector('.modal-header').offsetHeight;
       const footerHeight = document.querySelector('.modal-footer').offsetHeight;
       const modalHeight = modalContent.offsetHeight;
-      
+
       // Set iframe height based on the remaining space
       const iframeHeight = modalHeight - headerHeight - footerHeight - 40; // 40px for padding
       iframe.style.height = iframeHeight + 'px';
@@ -209,39 +209,29 @@ <h5 class="modal-title">Article or Video</h5>
 
     // Open modal and set iframe source on click
     links.forEach(link => {
-      link.addEventListener('click', function(event) {
+      link.addEventListener('click', function (event) {
         event.preventDefault();
         const url = this.href;
 
-        if (url.includes('wikipedia')) {
+        if (url.includes('wikipedia') || url.includes('youtube') || url.includes('spotify')) {
           iframe.src = url;
-        } else if (url.includes('youtube.com')) {
-          if (url.includes('embed/videoseries')) {
-            iframe.src = url; // Playlist
-          } else {
-            const videoId = url.split('v=')[1]?.split('&')[0];
-            iframe.src = `https://www.youtube.com/embed/${videoId}`; // Video
-          }
-        } else if (url.includes('spotify.com')) {
-          const spotifyUrl = url.replace('open.spotify.com', 'embed.spotify.com');
-          iframe.src = spotifyUrl;
         }
 
-        modal.style.display = 'flex'; // Show modal (flex layout for centering)
+        modal.style.display = 'flex'; // Show modal
         adjustIframeHeight(); // Adjust iframe height on modal open
       });
     });
 
     // Close modal and clear iframe content
     closeModalButtons.forEach(button => {
-      button.addEventListener('click', function() {
+      button.addEventListener('click', function () {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
       });
     });
 
     // Close modal when clicking outside modal content
-    modal.addEventListener('click', function(event) {
+    modal.addEventListener('click', function (event) {
       if (event.target === modal) {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
diff --git a/music/albums2010.html b/music/albums2010.html
index f4a7a7e69..3f653168d 100644
--- a/music/albums2010.html
+++ b/music/albums2010.html
@@ -173,14 +173,14 @@ <h3>2010 Albums</h3><span class="fo-5">Discover the top-charting music albums ac
     </div></div>
 
 <!-- Modal Structure -->
-<div id="wikiModal" class="modal">
+<div id="modal" class="modal">
   <div class="modal-content">
     <div class="modal-header">
-      <h5 class="modal-title">Article or Video</h5>
+      <h5 class="modal-title">Content Viewer</h5>
       <button class="close-btn" id="closeModal">&times;</button>
     </div>
     <div class="modal-body">
-      <iframe id="wikiIframe" src="" allowfullscreen></iframe> <!-- Added allowfullscreen -->
+      <iframe id="contentIframe" src="" allowfullscreen allow="encrypted-media"></iframe>
     </div>
     <div class="modal-footer">
       <button class="close-btn" id="closeFooter">Close</button>
@@ -189,10 +189,10 @@ <h5 class="modal-title">Article or Video</h5>
 </div>
 
 <script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"]');
-    const modal = document.getElementById('wikiModal');
-    const iframe = document.getElementById('wikiIframe');
+  document.addEventListener('DOMContentLoaded', function () {
+    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"], a[href*="spotify"]');
+    const modal = document.getElementById('modal');
+    const iframe = document.getElementById('contentIframe');
     const closeModalButtons = document.querySelectorAll('#closeModal, #closeFooter');
 
     // Function to adjust iframe height
@@ -201,7 +201,7 @@ <h5 class="modal-title">Article or Video</h5>
       const headerHeight = document.querySelector('.modal-header').offsetHeight;
       const footerHeight = document.querySelector('.modal-footer').offsetHeight;
       const modalHeight = modalContent.offsetHeight;
-      
+
       // Set iframe height based on the remaining space
       const iframeHeight = modalHeight - headerHeight - footerHeight - 40; // 40px for padding
       iframe.style.height = iframeHeight + 'px';
@@ -209,39 +209,29 @@ <h5 class="modal-title">Article or Video</h5>
 
     // Open modal and set iframe source on click
     links.forEach(link => {
-      link.addEventListener('click', function(event) {
+      link.addEventListener('click', function (event) {
         event.preventDefault();
         const url = this.href;
 
-        if (url.includes('wikipedia')) {
+        if (url.includes('wikipedia') || url.includes('youtube') || url.includes('spotify')) {
           iframe.src = url;
-        } else if (url.includes('youtube.com')) {
-          if (url.includes('embed/videoseries')) {
-            iframe.src = url; // Playlist
-          } else {
-            const videoId = url.split('v=')[1]?.split('&')[0];
-            iframe.src = `https://www.youtube.com/embed/${videoId}`; // Video
-          }
-        } else if (url.includes('spotify.com')) {
-          const spotifyUrl = url.replace('open.spotify.com', 'embed.spotify.com');
-          iframe.src = spotifyUrl;
         }
 
-        modal.style.display = 'flex'; // Show modal (flex layout for centering)
+        modal.style.display = 'flex'; // Show modal
         adjustIframeHeight(); // Adjust iframe height on modal open
       });
     });
 
     // Close modal and clear iframe content
     closeModalButtons.forEach(button => {
-      button.addEventListener('click', function() {
+      button.addEventListener('click', function () {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
       });
     });
 
     // Close modal when clicking outside modal content
-    modal.addEventListener('click', function(event) {
+    modal.addEventListener('click', function (event) {
       if (event.target === modal) {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
diff --git a/music/albums2011.html b/music/albums2011.html
index 41f4bb29c..c86d473af 100644
--- a/music/albums2011.html
+++ b/music/albums2011.html
@@ -173,14 +173,14 @@ <h3>2011 Albums</h3><span class="fo-5">Discover the top-charting music albums ac
     </div></div>
 
 <!-- Modal Structure -->
-<div id="wikiModal" class="modal">
+<div id="modal" class="modal">
   <div class="modal-content">
     <div class="modal-header">
-      <h5 class="modal-title">Article or Video</h5>
+      <h5 class="modal-title">Content Viewer</h5>
       <button class="close-btn" id="closeModal">&times;</button>
     </div>
     <div class="modal-body">
-      <iframe id="wikiIframe" src="" allowfullscreen></iframe> <!-- Added allowfullscreen -->
+      <iframe id="contentIframe" src="" allowfullscreen allow="encrypted-media"></iframe>
     </div>
     <div class="modal-footer">
       <button class="close-btn" id="closeFooter">Close</button>
@@ -189,10 +189,10 @@ <h5 class="modal-title">Article or Video</h5>
 </div>
 
 <script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"]');
-    const modal = document.getElementById('wikiModal');
-    const iframe = document.getElementById('wikiIframe');
+  document.addEventListener('DOMContentLoaded', function () {
+    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"], a[href*="spotify"]');
+    const modal = document.getElementById('modal');
+    const iframe = document.getElementById('contentIframe');
     const closeModalButtons = document.querySelectorAll('#closeModal, #closeFooter');
 
     // Function to adjust iframe height
@@ -201,7 +201,7 @@ <h5 class="modal-title">Article or Video</h5>
       const headerHeight = document.querySelector('.modal-header').offsetHeight;
       const footerHeight = document.querySelector('.modal-footer').offsetHeight;
       const modalHeight = modalContent.offsetHeight;
-      
+
       // Set iframe height based on the remaining space
       const iframeHeight = modalHeight - headerHeight - footerHeight - 40; // 40px for padding
       iframe.style.height = iframeHeight + 'px';
@@ -209,39 +209,29 @@ <h5 class="modal-title">Article or Video</h5>
 
     // Open modal and set iframe source on click
     links.forEach(link => {
-      link.addEventListener('click', function(event) {
+      link.addEventListener('click', function (event) {
         event.preventDefault();
         const url = this.href;
 
-        if (url.includes('wikipedia')) {
+        if (url.includes('wikipedia') || url.includes('youtube') || url.includes('spotify')) {
           iframe.src = url;
-        } else if (url.includes('youtube.com')) {
-          if (url.includes('embed/videoseries')) {
-            iframe.src = url; // Playlist
-          } else {
-            const videoId = url.split('v=')[1]?.split('&')[0];
-            iframe.src = `https://www.youtube.com/embed/${videoId}`; // Video
-          }
-        } else if (url.includes('spotify.com')) {
-          const spotifyUrl = url.replace('open.spotify.com', 'embed.spotify.com');
-          iframe.src = spotifyUrl;
         }
 
-        modal.style.display = 'flex'; // Show modal (flex layout for centering)
+        modal.style.display = 'flex'; // Show modal
         adjustIframeHeight(); // Adjust iframe height on modal open
       });
     });
 
     // Close modal and clear iframe content
     closeModalButtons.forEach(button => {
-      button.addEventListener('click', function() {
+      button.addEventListener('click', function () {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
       });
     });
 
     // Close modal when clicking outside modal content
-    modal.addEventListener('click', function(event) {
+    modal.addEventListener('click', function (event) {
       if (event.target === modal) {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
diff --git a/music/albums2013.html b/music/albums2013.html
index 825ff1588..44d40bc30 100644
--- a/music/albums2013.html
+++ b/music/albums2013.html
@@ -174,14 +174,14 @@ <h3>2013 Albums</h3><span class="fo-5">Discover the top-charting music albums ac
     </div></div>
 
 <!-- Modal Structure -->
-<div id="wikiModal" class="modal">
+<div id="modal" class="modal">
   <div class="modal-content">
     <div class="modal-header">
-      <h5 class="modal-title">Article or Video</h5>
+      <h5 class="modal-title">Content Viewer</h5>
       <button class="close-btn" id="closeModal">&times;</button>
     </div>
     <div class="modal-body">
-      <iframe id="wikiIframe" src="" allowfullscreen></iframe> <!-- Added allowfullscreen -->
+      <iframe id="contentIframe" src="" allowfullscreen allow="encrypted-media"></iframe>
     </div>
     <div class="modal-footer">
       <button class="close-btn" id="closeFooter">Close</button>
@@ -190,10 +190,10 @@ <h5 class="modal-title">Article or Video</h5>
 </div>
 
 <script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"]');
-    const modal = document.getElementById('wikiModal');
-    const iframe = document.getElementById('wikiIframe');
+  document.addEventListener('DOMContentLoaded', function () {
+    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"], a[href*="spotify"]');
+    const modal = document.getElementById('modal');
+    const iframe = document.getElementById('contentIframe');
     const closeModalButtons = document.querySelectorAll('#closeModal, #closeFooter');
 
     // Function to adjust iframe height
@@ -202,7 +202,7 @@ <h5 class="modal-title">Article or Video</h5>
       const headerHeight = document.querySelector('.modal-header').offsetHeight;
       const footerHeight = document.querySelector('.modal-footer').offsetHeight;
       const modalHeight = modalContent.offsetHeight;
-      
+
       // Set iframe height based on the remaining space
       const iframeHeight = modalHeight - headerHeight - footerHeight - 40; // 40px for padding
       iframe.style.height = iframeHeight + 'px';
@@ -210,39 +210,29 @@ <h5 class="modal-title">Article or Video</h5>
 
     // Open modal and set iframe source on click
     links.forEach(link => {
-      link.addEventListener('click', function(event) {
+      link.addEventListener('click', function (event) {
         event.preventDefault();
         const url = this.href;
 
-        if (url.includes('wikipedia')) {
+        if (url.includes('wikipedia') || url.includes('youtube') || url.includes('spotify')) {
           iframe.src = url;
-        } else if (url.includes('youtube.com')) {
-          if (url.includes('embed/videoseries')) {
-            iframe.src = url; // Playlist
-          } else {
-            const videoId = url.split('v=')[1]?.split('&')[0];
-            iframe.src = `https://www.youtube.com/embed/${videoId}`; // Video
-          }
-        } else if (url.includes('spotify.com')) {
-          const spotifyUrl = url.replace('open.spotify.com', 'embed.spotify.com');
-          iframe.src = spotifyUrl;
         }
 
-        modal.style.display = 'flex'; // Show modal (flex layout for centering)
+        modal.style.display = 'flex'; // Show modal
         adjustIframeHeight(); // Adjust iframe height on modal open
       });
     });
 
     // Close modal and clear iframe content
     closeModalButtons.forEach(button => {
-      button.addEventListener('click', function() {
+      button.addEventListener('click', function () {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
       });
     });
 
     // Close modal when clicking outside modal content
-    modal.addEventListener('click', function(event) {
+    modal.addEventListener('click', function (event) {
       if (event.target === modal) {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
diff --git a/music/albums2014.html b/music/albums2014.html
index 99a3a4181..99fd1b483 100644
--- a/music/albums2014.html
+++ b/music/albums2014.html
@@ -173,14 +173,14 @@ <h3>2014 Albums</h3><span class="fo-5">Discover the top-charting music albums ac
     </div></div>
 
 <!-- Modal Structure -->
-<div id="wikiModal" class="modal">
+<div id="modal" class="modal">
   <div class="modal-content">
     <div class="modal-header">
-      <h5 class="modal-title">Article or Video</h5>
+      <h5 class="modal-title">Content Viewer</h5>
       <button class="close-btn" id="closeModal">&times;</button>
     </div>
     <div class="modal-body">
-      <iframe id="wikiIframe" src="" allowfullscreen></iframe> <!-- Added allowfullscreen -->
+      <iframe id="contentIframe" src="" allowfullscreen allow="encrypted-media"></iframe>
     </div>
     <div class="modal-footer">
       <button class="close-btn" id="closeFooter">Close</button>
@@ -189,10 +189,10 @@ <h5 class="modal-title">Article or Video</h5>
 </div>
 
 <script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"]');
-    const modal = document.getElementById('wikiModal');
-    const iframe = document.getElementById('wikiIframe');
+  document.addEventListener('DOMContentLoaded', function () {
+    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"], a[href*="spotify"]');
+    const modal = document.getElementById('modal');
+    const iframe = document.getElementById('contentIframe');
     const closeModalButtons = document.querySelectorAll('#closeModal, #closeFooter');
 
     // Function to adjust iframe height
@@ -201,7 +201,7 @@ <h5 class="modal-title">Article or Video</h5>
       const headerHeight = document.querySelector('.modal-header').offsetHeight;
       const footerHeight = document.querySelector('.modal-footer').offsetHeight;
       const modalHeight = modalContent.offsetHeight;
-      
+
       // Set iframe height based on the remaining space
       const iframeHeight = modalHeight - headerHeight - footerHeight - 40; // 40px for padding
       iframe.style.height = iframeHeight + 'px';
@@ -209,39 +209,29 @@ <h5 class="modal-title">Article or Video</h5>
 
     // Open modal and set iframe source on click
     links.forEach(link => {
-      link.addEventListener('click', function(event) {
+      link.addEventListener('click', function (event) {
         event.preventDefault();
         const url = this.href;
 
-        if (url.includes('wikipedia')) {
+        if (url.includes('wikipedia') || url.includes('youtube') || url.includes('spotify')) {
           iframe.src = url;
-        } else if (url.includes('youtube.com')) {
-          if (url.includes('embed/videoseries')) {
-            iframe.src = url; // Playlist
-          } else {
-            const videoId = url.split('v=')[1]?.split('&')[0];
-            iframe.src = `https://www.youtube.com/embed/${videoId}`; // Video
-          }
-        } else if (url.includes('spotify.com')) {
-          const spotifyUrl = url.replace('open.spotify.com', 'embed.spotify.com');
-          iframe.src = spotifyUrl;
         }
 
-        modal.style.display = 'flex'; // Show modal (flex layout for centering)
+        modal.style.display = 'flex'; // Show modal
         adjustIframeHeight(); // Adjust iframe height on modal open
       });
     });
 
     // Close modal and clear iframe content
     closeModalButtons.forEach(button => {
-      button.addEventListener('click', function() {
+      button.addEventListener('click', function () {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
       });
     });
 
     // Close modal when clicking outside modal content
-    modal.addEventListener('click', function(event) {
+    modal.addEventListener('click', function (event) {
       if (event.target === modal) {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
diff --git a/music/albums2017.html b/music/albums2017.html
index ed75e85af..ca39d1273 100644
--- a/music/albums2017.html
+++ b/music/albums2017.html
@@ -173,14 +173,14 @@ <h3>2017 Albums</h3><span class="fo-5">Discover the top-charting music albums ac
     </div></div>
 
 <!-- Modal Structure -->
-<div id="wikiModal" class="modal">
+<div id="modal" class="modal">
   <div class="modal-content">
     <div class="modal-header">
-      <h5 class="modal-title">Article or Video</h5>
+      <h5 class="modal-title">Content Viewer</h5>
       <button class="close-btn" id="closeModal">&times;</button>
     </div>
     <div class="modal-body">
-      <iframe id="wikiIframe" src="" allowfullscreen></iframe> <!-- Added allowfullscreen -->
+      <iframe id="contentIframe" src="" allowfullscreen allow="encrypted-media"></iframe>
     </div>
     <div class="modal-footer">
       <button class="close-btn" id="closeFooter">Close</button>
@@ -189,10 +189,10 @@ <h5 class="modal-title">Article or Video</h5>
 </div>
 
 <script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"]');
-    const modal = document.getElementById('wikiModal');
-    const iframe = document.getElementById('wikiIframe');
+  document.addEventListener('DOMContentLoaded', function () {
+    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"], a[href*="spotify"]');
+    const modal = document.getElementById('modal');
+    const iframe = document.getElementById('contentIframe');
     const closeModalButtons = document.querySelectorAll('#closeModal, #closeFooter');
 
     // Function to adjust iframe height
@@ -201,7 +201,7 @@ <h5 class="modal-title">Article or Video</h5>
       const headerHeight = document.querySelector('.modal-header').offsetHeight;
       const footerHeight = document.querySelector('.modal-footer').offsetHeight;
       const modalHeight = modalContent.offsetHeight;
-      
+
       // Set iframe height based on the remaining space
       const iframeHeight = modalHeight - headerHeight - footerHeight - 40; // 40px for padding
       iframe.style.height = iframeHeight + 'px';
@@ -209,39 +209,29 @@ <h5 class="modal-title">Article or Video</h5>
 
     // Open modal and set iframe source on click
     links.forEach(link => {
-      link.addEventListener('click', function(event) {
+      link.addEventListener('click', function (event) {
         event.preventDefault();
         const url = this.href;
 
-        if (url.includes('wikipedia')) {
+        if (url.includes('wikipedia') || url.includes('youtube') || url.includes('spotify')) {
           iframe.src = url;
-        } else if (url.includes('youtube.com')) {
-          if (url.includes('embed/videoseries')) {
-            iframe.src = url; // Playlist
-          } else {
-            const videoId = url.split('v=')[1]?.split('&')[0];
-            iframe.src = `https://www.youtube.com/embed/${videoId}`; // Video
-          }
-        } else if (url.includes('spotify.com')) {
-          const spotifyUrl = url.replace('open.spotify.com', 'embed.spotify.com');
-          iframe.src = spotifyUrl;
         }
 
-        modal.style.display = 'flex'; // Show modal (flex layout for centering)
+        modal.style.display = 'flex'; // Show modal
         adjustIframeHeight(); // Adjust iframe height on modal open
       });
     });
 
     // Close modal and clear iframe content
     closeModalButtons.forEach(button => {
-      button.addEventListener('click', function() {
+      button.addEventListener('click', function () {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
       });
     });
 
     // Close modal when clicking outside modal content
-    modal.addEventListener('click', function(event) {
+    modal.addEventListener('click', function (event) {
       if (event.target === modal) {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
diff --git a/music/albums2018.html b/music/albums2018.html
index c569e5c80..220e2619b 100644
--- a/music/albums2018.html
+++ b/music/albums2018.html
@@ -173,14 +173,14 @@ <h3>2018 Albums</h3><span class="fo-5">Discover the top-charting music albums ac
     </div></div>
 
 <!-- Modal Structure -->
-<div id="wikiModal" class="modal">
+<div id="modal" class="modal">
   <div class="modal-content">
     <div class="modal-header">
-      <h5 class="modal-title">Article or Video</h5>
+      <h5 class="modal-title">Content Viewer</h5>
       <button class="close-btn" id="closeModal">&times;</button>
     </div>
     <div class="modal-body">
-      <iframe id="wikiIframe" src="" allowfullscreen></iframe> <!-- Added allowfullscreen -->
+      <iframe id="contentIframe" src="" allowfullscreen allow="encrypted-media"></iframe>
     </div>
     <div class="modal-footer">
       <button class="close-btn" id="closeFooter">Close</button>
@@ -189,10 +189,10 @@ <h5 class="modal-title">Article or Video</h5>
 </div>
 
 <script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"]');
-    const modal = document.getElementById('wikiModal');
-    const iframe = document.getElementById('wikiIframe');
+  document.addEventListener('DOMContentLoaded', function () {
+    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"], a[href*="spotify"]');
+    const modal = document.getElementById('modal');
+    const iframe = document.getElementById('contentIframe');
     const closeModalButtons = document.querySelectorAll('#closeModal, #closeFooter');
 
     // Function to adjust iframe height
@@ -201,7 +201,7 @@ <h5 class="modal-title">Article or Video</h5>
       const headerHeight = document.querySelector('.modal-header').offsetHeight;
       const footerHeight = document.querySelector('.modal-footer').offsetHeight;
       const modalHeight = modalContent.offsetHeight;
-      
+
       // Set iframe height based on the remaining space
       const iframeHeight = modalHeight - headerHeight - footerHeight - 40; // 40px for padding
       iframe.style.height = iframeHeight + 'px';
@@ -209,39 +209,29 @@ <h5 class="modal-title">Article or Video</h5>
 
     // Open modal and set iframe source on click
     links.forEach(link => {
-      link.addEventListener('click', function(event) {
+      link.addEventListener('click', function (event) {
         event.preventDefault();
         const url = this.href;
 
-        if (url.includes('wikipedia')) {
+        if (url.includes('wikipedia') || url.includes('youtube') || url.includes('spotify')) {
           iframe.src = url;
-        } else if (url.includes('youtube.com')) {
-          if (url.includes('embed/videoseries')) {
-            iframe.src = url; // Playlist
-          } else {
-            const videoId = url.split('v=')[1]?.split('&')[0];
-            iframe.src = `https://www.youtube.com/embed/${videoId}`; // Video
-          }
-        } else if (url.includes('spotify.com')) {
-          const spotifyUrl = url.replace('open.spotify.com', 'embed.spotify.com');
-          iframe.src = spotifyUrl;
         }
 
-        modal.style.display = 'flex'; // Show modal (flex layout for centering)
+        modal.style.display = 'flex'; // Show modal
         adjustIframeHeight(); // Adjust iframe height on modal open
       });
     });
 
     // Close modal and clear iframe content
     closeModalButtons.forEach(button => {
-      button.addEventListener('click', function() {
+      button.addEventListener('click', function () {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
       });
     });
 
     // Close modal when clicking outside modal content
-    modal.addEventListener('click', function(event) {
+    modal.addEventListener('click', function (event) {
       if (event.target === modal) {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
diff --git a/music/albums2019.html b/music/albums2019.html
index 0a976f645..50891fec4 100644
--- a/music/albums2019.html
+++ b/music/albums2019.html
@@ -173,14 +173,14 @@ <h3>2019 Albums</h3><span class="fo-5">Discover the top-charting music albums ac
     </div></div>
 
 <!-- Modal Structure -->
-<div id="wikiModal" class="modal">
+<div id="modal" class="modal">
   <div class="modal-content">
     <div class="modal-header">
-      <h5 class="modal-title">Article or Video</h5>
+      <h5 class="modal-title">Content Viewer</h5>
       <button class="close-btn" id="closeModal">&times;</button>
     </div>
     <div class="modal-body">
-      <iframe id="wikiIframe" src="" allowfullscreen></iframe> <!-- Added allowfullscreen -->
+      <iframe id="contentIframe" src="" allowfullscreen allow="encrypted-media"></iframe>
     </div>
     <div class="modal-footer">
       <button class="close-btn" id="closeFooter">Close</button>
@@ -189,10 +189,10 @@ <h5 class="modal-title">Article or Video</h5>
 </div>
 
 <script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"]');
-    const modal = document.getElementById('wikiModal');
-    const iframe = document.getElementById('wikiIframe');
+  document.addEventListener('DOMContentLoaded', function () {
+    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"], a[href*="spotify"]');
+    const modal = document.getElementById('modal');
+    const iframe = document.getElementById('contentIframe');
     const closeModalButtons = document.querySelectorAll('#closeModal, #closeFooter');
 
     // Function to adjust iframe height
@@ -201,7 +201,7 @@ <h5 class="modal-title">Article or Video</h5>
       const headerHeight = document.querySelector('.modal-header').offsetHeight;
       const footerHeight = document.querySelector('.modal-footer').offsetHeight;
       const modalHeight = modalContent.offsetHeight;
-      
+
       // Set iframe height based on the remaining space
       const iframeHeight = modalHeight - headerHeight - footerHeight - 40; // 40px for padding
       iframe.style.height = iframeHeight + 'px';
@@ -209,39 +209,29 @@ <h5 class="modal-title">Article or Video</h5>
 
     // Open modal and set iframe source on click
     links.forEach(link => {
-      link.addEventListener('click', function(event) {
+      link.addEventListener('click', function (event) {
         event.preventDefault();
         const url = this.href;
 
-        if (url.includes('wikipedia')) {
+        if (url.includes('wikipedia') || url.includes('youtube') || url.includes('spotify')) {
           iframe.src = url;
-        } else if (url.includes('youtube.com')) {
-          if (url.includes('embed/videoseries')) {
-            iframe.src = url; // Playlist
-          } else {
-            const videoId = url.split('v=')[1]?.split('&')[0];
-            iframe.src = `https://www.youtube.com/embed/${videoId}`; // Video
-          }
-        } else if (url.includes('spotify.com')) {
-          const spotifyUrl = url.replace('open.spotify.com', 'embed.spotify.com');
-          iframe.src = spotifyUrl;
         }
 
-        modal.style.display = 'flex'; // Show modal (flex layout for centering)
+        modal.style.display = 'flex'; // Show modal
         adjustIframeHeight(); // Adjust iframe height on modal open
       });
     });
 
     // Close modal and clear iframe content
     closeModalButtons.forEach(button => {
-      button.addEventListener('click', function() {
+      button.addEventListener('click', function () {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
       });
     });
 
     // Close modal when clicking outside modal content
-    modal.addEventListener('click', function(event) {
+    modal.addEventListener('click', function (event) {
       if (event.target === modal) {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
diff --git a/music/albums2020.html b/music/albums2020.html
index d24399e24..25f360f9e 100644
--- a/music/albums2020.html
+++ b/music/albums2020.html
@@ -173,14 +173,14 @@ <h3>2020 Albums</h3><span class="fo-5">Discover the top-charting music albums ac
     </div></div>
 
 <!-- Modal Structure -->
-<div id="wikiModal" class="modal">
+<div id="modal" class="modal">
   <div class="modal-content">
     <div class="modal-header">
-      <h5 class="modal-title">Article or Video</h5>
+      <h5 class="modal-title">Content Viewer</h5>
       <button class="close-btn" id="closeModal">&times;</button>
     </div>
     <div class="modal-body">
-      <iframe id="wikiIframe" src="" allowfullscreen></iframe> <!-- Added allowfullscreen -->
+      <iframe id="contentIframe" src="" allowfullscreen allow="encrypted-media"></iframe>
     </div>
     <div class="modal-footer">
       <button class="close-btn" id="closeFooter">Close</button>
@@ -189,10 +189,10 @@ <h5 class="modal-title">Article or Video</h5>
 </div>
 
 <script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"]');
-    const modal = document.getElementById('wikiModal');
-    const iframe = document.getElementById('wikiIframe');
+  document.addEventListener('DOMContentLoaded', function () {
+    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"], a[href*="spotify"]');
+    const modal = document.getElementById('modal');
+    const iframe = document.getElementById('contentIframe');
     const closeModalButtons = document.querySelectorAll('#closeModal, #closeFooter');
 
     // Function to adjust iframe height
@@ -201,7 +201,7 @@ <h5 class="modal-title">Article or Video</h5>
       const headerHeight = document.querySelector('.modal-header').offsetHeight;
       const footerHeight = document.querySelector('.modal-footer').offsetHeight;
       const modalHeight = modalContent.offsetHeight;
-      
+
       // Set iframe height based on the remaining space
       const iframeHeight = modalHeight - headerHeight - footerHeight - 40; // 40px for padding
       iframe.style.height = iframeHeight + 'px';
@@ -209,39 +209,29 @@ <h5 class="modal-title">Article or Video</h5>
 
     // Open modal and set iframe source on click
     links.forEach(link => {
-      link.addEventListener('click', function(event) {
+      link.addEventListener('click', function (event) {
         event.preventDefault();
         const url = this.href;
 
-        if (url.includes('wikipedia')) {
+        if (url.includes('wikipedia') || url.includes('youtube') || url.includes('spotify')) {
           iframe.src = url;
-        } else if (url.includes('youtube.com')) {
-          if (url.includes('embed/videoseries')) {
-            iframe.src = url; // Playlist
-          } else {
-            const videoId = url.split('v=')[1]?.split('&')[0];
-            iframe.src = `https://www.youtube.com/embed/${videoId}`; // Video
-          }
-        } else if (url.includes('spotify.com')) {
-          const spotifyUrl = url.replace('open.spotify.com', 'embed.spotify.com');
-          iframe.src = spotifyUrl;
         }
 
-        modal.style.display = 'flex'; // Show modal (flex layout for centering)
+        modal.style.display = 'flex'; // Show modal
         adjustIframeHeight(); // Adjust iframe height on modal open
       });
     });
 
     // Close modal and clear iframe content
     closeModalButtons.forEach(button => {
-      button.addEventListener('click', function() {
+      button.addEventListener('click', function () {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
       });
     });
 
     // Close modal when clicking outside modal content
-    modal.addEventListener('click', function(event) {
+    modal.addEventListener('click', function (event) {
       if (event.target === modal) {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
diff --git a/music/albums2021.html b/music/albums2021.html
index af5b3b09f..34476632b 100644
--- a/music/albums2021.html
+++ b/music/albums2021.html
@@ -173,14 +173,14 @@ <h3>2021 Albums</h3><span class="fo-5">Discover the top-charting music albums ac
     </div></div>
 
 <!-- Modal Structure -->
-<div id="wikiModal" class="modal">
+<div id="modal" class="modal">
   <div class="modal-content">
     <div class="modal-header">
-      <h5 class="modal-title">Article or Video</h5>
+      <h5 class="modal-title">Content Viewer</h5>
       <button class="close-btn" id="closeModal">&times;</button>
     </div>
     <div class="modal-body">
-      <iframe id="wikiIframe" src="" allowfullscreen></iframe> <!-- Added allowfullscreen -->
+      <iframe id="contentIframe" src="" allowfullscreen allow="encrypted-media"></iframe>
     </div>
     <div class="modal-footer">
       <button class="close-btn" id="closeFooter">Close</button>
@@ -189,10 +189,10 @@ <h5 class="modal-title">Article or Video</h5>
 </div>
 
 <script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"]');
-    const modal = document.getElementById('wikiModal');
-    const iframe = document.getElementById('wikiIframe');
+  document.addEventListener('DOMContentLoaded', function () {
+    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"], a[href*="spotify"]');
+    const modal = document.getElementById('modal');
+    const iframe = document.getElementById('contentIframe');
     const closeModalButtons = document.querySelectorAll('#closeModal, #closeFooter');
 
     // Function to adjust iframe height
@@ -201,7 +201,7 @@ <h5 class="modal-title">Article or Video</h5>
       const headerHeight = document.querySelector('.modal-header').offsetHeight;
       const footerHeight = document.querySelector('.modal-footer').offsetHeight;
       const modalHeight = modalContent.offsetHeight;
-      
+
       // Set iframe height based on the remaining space
       const iframeHeight = modalHeight - headerHeight - footerHeight - 40; // 40px for padding
       iframe.style.height = iframeHeight + 'px';
@@ -209,39 +209,29 @@ <h5 class="modal-title">Article or Video</h5>
 
     // Open modal and set iframe source on click
     links.forEach(link => {
-      link.addEventListener('click', function(event) {
+      link.addEventListener('click', function (event) {
         event.preventDefault();
         const url = this.href;
 
-        if (url.includes('wikipedia')) {
+        if (url.includes('wikipedia') || url.includes('youtube') || url.includes('spotify')) {
           iframe.src = url;
-        } else if (url.includes('youtube.com')) {
-          if (url.includes('embed/videoseries')) {
-            iframe.src = url; // Playlist
-          } else {
-            const videoId = url.split('v=')[1]?.split('&')[0];
-            iframe.src = `https://www.youtube.com/embed/${videoId}`; // Video
-          }
-        } else if (url.includes('spotify.com')) {
-          const spotifyUrl = url.replace('open.spotify.com', 'embed.spotify.com');
-          iframe.src = spotifyUrl;
         }
 
-        modal.style.display = 'flex'; // Show modal (flex layout for centering)
+        modal.style.display = 'flex'; // Show modal
         adjustIframeHeight(); // Adjust iframe height on modal open
       });
     });
 
     // Close modal and clear iframe content
     closeModalButtons.forEach(button => {
-      button.addEventListener('click', function() {
+      button.addEventListener('click', function () {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
       });
     });
 
     // Close modal when clicking outside modal content
-    modal.addEventListener('click', function(event) {
+    modal.addEventListener('click', function (event) {
       if (event.target === modal) {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
diff --git a/music/albums2022.html b/music/albums2022.html
index 6573e8817..73b7df18e 100644
--- a/music/albums2022.html
+++ b/music/albums2022.html
@@ -174,14 +174,14 @@ <h3>2022 Albums</h3><span class="fo-5">Discover the top-charting music albums ac
     </div></div>
 
 <!-- Modal Structure -->
-<div id="wikiModal" class="modal">
+<div id="modal" class="modal">
   <div class="modal-content">
     <div class="modal-header">
-      <h5 class="modal-title">Article or Video</h5>
+      <h5 class="modal-title">Content Viewer</h5>
       <button class="close-btn" id="closeModal">&times;</button>
     </div>
     <div class="modal-body">
-      <iframe id="wikiIframe" src="" allowfullscreen></iframe> <!-- Added allowfullscreen -->
+      <iframe id="contentIframe" src="" allowfullscreen allow="encrypted-media"></iframe>
     </div>
     <div class="modal-footer">
       <button class="close-btn" id="closeFooter">Close</button>
@@ -190,10 +190,10 @@ <h5 class="modal-title">Article or Video</h5>
 </div>
 
 <script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"]');
-    const modal = document.getElementById('wikiModal');
-    const iframe = document.getElementById('wikiIframe');
+  document.addEventListener('DOMContentLoaded', function () {
+    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"], a[href*="spotify"]');
+    const modal = document.getElementById('modal');
+    const iframe = document.getElementById('contentIframe');
     const closeModalButtons = document.querySelectorAll('#closeModal, #closeFooter');
 
     // Function to adjust iframe height
@@ -202,7 +202,7 @@ <h5 class="modal-title">Article or Video</h5>
       const headerHeight = document.querySelector('.modal-header').offsetHeight;
       const footerHeight = document.querySelector('.modal-footer').offsetHeight;
       const modalHeight = modalContent.offsetHeight;
-      
+
       // Set iframe height based on the remaining space
       const iframeHeight = modalHeight - headerHeight - footerHeight - 40; // 40px for padding
       iframe.style.height = iframeHeight + 'px';
@@ -210,39 +210,29 @@ <h5 class="modal-title">Article or Video</h5>
 
     // Open modal and set iframe source on click
     links.forEach(link => {
-      link.addEventListener('click', function(event) {
+      link.addEventListener('click', function (event) {
         event.preventDefault();
         const url = this.href;
 
-        if (url.includes('wikipedia')) {
+        if (url.includes('wikipedia') || url.includes('youtube') || url.includes('spotify')) {
           iframe.src = url;
-        } else if (url.includes('youtube.com')) {
-          if (url.includes('embed/videoseries')) {
-            iframe.src = url; // Playlist
-          } else {
-            const videoId = url.split('v=')[1]?.split('&')[0];
-            iframe.src = `https://www.youtube.com/embed/${videoId}`; // Video
-          }
-        } else if (url.includes('spotify.com')) {
-          const spotifyUrl = url.replace('open.spotify.com', 'embed.spotify.com');
-          iframe.src = spotifyUrl;
         }
 
-        modal.style.display = 'flex'; // Show modal (flex layout for centering)
+        modal.style.display = 'flex'; // Show modal
         adjustIframeHeight(); // Adjust iframe height on modal open
       });
     });
 
     // Close modal and clear iframe content
     closeModalButtons.forEach(button => {
-      button.addEventListener('click', function() {
+      button.addEventListener('click', function () {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
       });
     });
 
     // Close modal when clicking outside modal content
-    modal.addEventListener('click', function(event) {
+    modal.addEventListener('click', function (event) {
       if (event.target === modal) {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
@@ -254,7 +244,7 @@ <h5 class="modal-title">Article or Video</h5>
   });
 </script>
 
-    <footer class="foot">
+<footer class="foot">
         <div class="block fo-1">
             TwidGrid is a small web development studio based in Central Malta.
             <p>&copy; <span id="current-year"></span> TwidGrid. Est Malta.</p>
diff --git a/music/albums2023.html b/music/albums2023.html
index 808f4dc51..00a9a84ed 100644
--- a/music/albums2023.html
+++ b/music/albums2023.html
@@ -179,14 +179,14 @@ <h3>2023 Albums</h3><span class="fo-5">Discover the top-charting music albums ac
     </div></div>
 
 <!-- Modal Structure -->
-<div id="wikiModal" class="modal">
+<div id="modal" class="modal">
   <div class="modal-content">
     <div class="modal-header">
-      <h5 class="modal-title">Article or Video</h5>
+      <h5 class="modal-title">Content Viewer</h5>
       <button class="close-btn" id="closeModal">&times;</button>
     </div>
     <div class="modal-body">
-      <iframe id="wikiIframe" src="" allowfullscreen></iframe> <!-- Added allowfullscreen -->
+      <iframe id="contentIframe" src="" allowfullscreen allow="encrypted-media"></iframe>
     </div>
     <div class="modal-footer">
       <button class="close-btn" id="closeFooter">Close</button>
@@ -195,10 +195,10 @@ <h5 class="modal-title">Article or Video</h5>
 </div>
 
 <script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"]');
-    const modal = document.getElementById('wikiModal');
-    const iframe = document.getElementById('wikiIframe');
+  document.addEventListener('DOMContentLoaded', function () {
+    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"], a[href*="spotify"]');
+    const modal = document.getElementById('modal');
+    const iframe = document.getElementById('contentIframe');
     const closeModalButtons = document.querySelectorAll('#closeModal, #closeFooter');
 
     // Function to adjust iframe height
@@ -207,7 +207,7 @@ <h5 class="modal-title">Article or Video</h5>
       const headerHeight = document.querySelector('.modal-header').offsetHeight;
       const footerHeight = document.querySelector('.modal-footer').offsetHeight;
       const modalHeight = modalContent.offsetHeight;
-      
+
       // Set iframe height based on the remaining space
       const iframeHeight = modalHeight - headerHeight - footerHeight - 40; // 40px for padding
       iframe.style.height = iframeHeight + 'px';
@@ -215,39 +215,29 @@ <h5 class="modal-title">Article or Video</h5>
 
     // Open modal and set iframe source on click
     links.forEach(link => {
-      link.addEventListener('click', function(event) {
+      link.addEventListener('click', function (event) {
         event.preventDefault();
         const url = this.href;
 
-        if (url.includes('wikipedia')) {
+        if (url.includes('wikipedia') || url.includes('youtube') || url.includes('spotify')) {
           iframe.src = url;
-        } else if (url.includes('youtube.com')) {
-          if (url.includes('embed/videoseries')) {
-            iframe.src = url; // Playlist
-          } else {
-            const videoId = url.split('v=')[1]?.split('&')[0];
-            iframe.src = `https://www.youtube.com/embed/${videoId}`; // Video
-          }
-        } else if (url.includes('spotify.com')) {
-          const spotifyUrl = url.replace('open.spotify.com', 'embed.spotify.com');
-          iframe.src = spotifyUrl;
         }
 
-        modal.style.display = 'flex'; // Show modal (flex layout for centering)
+        modal.style.display = 'flex'; // Show modal
         adjustIframeHeight(); // Adjust iframe height on modal open
       });
     });
 
     // Close modal and clear iframe content
     closeModalButtons.forEach(button => {
-      button.addEventListener('click', function() {
+      button.addEventListener('click', function () {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
       });
     });
 
     // Close modal when clicking outside modal content
-    modal.addEventListener('click', function(event) {
+    modal.addEventListener('click', function (event) {
       if (event.target === modal) {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
diff --git a/music/albums2024.html b/music/albums2024.html
index cdca26672..00ffca753 100644
--- a/music/albums2024.html
+++ b/music/albums2024.html
@@ -320,14 +320,14 @@ <h3>2024 Albums</h3><span class="fo-5">Discover the top-charting music albums ac
     </div></div>
 
 <!-- Modal Structure -->
-<div id="wikiModal" class="modal">
+<div id="modal" class="modal">
   <div class="modal-content">
     <div class="modal-header">
-      <h5 class="modal-title">Article or Video</h5>
+      <h5 class="modal-title">Content Viewer</h5>
       <button class="close-btn" id="closeModal">&times;</button>
     </div>
     <div class="modal-body">
-      <iframe id="wikiIframe" src="" allowfullscreen></iframe> <!-- Added allowfullscreen -->
+      <iframe id="contentIframe" src="" allowfullscreen allow="encrypted-media"></iframe>
     </div>
     <div class="modal-footer">
       <button class="close-btn" id="closeFooter">Close</button>
@@ -336,10 +336,10 @@ <h5 class="modal-title">Article or Video</h5>
 </div>
 
 <script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"]');
-    const modal = document.getElementById('wikiModal');
-    const iframe = document.getElementById('wikiIframe');
+  document.addEventListener('DOMContentLoaded', function () {
+    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"], a[href*="spotify"]');
+    const modal = document.getElementById('modal');
+    const iframe = document.getElementById('contentIframe');
     const closeModalButtons = document.querySelectorAll('#closeModal, #closeFooter');
 
     // Function to adjust iframe height
@@ -348,7 +348,7 @@ <h5 class="modal-title">Article or Video</h5>
       const headerHeight = document.querySelector('.modal-header').offsetHeight;
       const footerHeight = document.querySelector('.modal-footer').offsetHeight;
       const modalHeight = modalContent.offsetHeight;
-      
+
       // Set iframe height based on the remaining space
       const iframeHeight = modalHeight - headerHeight - footerHeight - 40; // 40px for padding
       iframe.style.height = iframeHeight + 'px';
@@ -356,39 +356,29 @@ <h5 class="modal-title">Article or Video</h5>
 
     // Open modal and set iframe source on click
     links.forEach(link => {
-      link.addEventListener('click', function(event) {
+      link.addEventListener('click', function (event) {
         event.preventDefault();
         const url = this.href;
 
-        if (url.includes('wikipedia')) {
+        if (url.includes('wikipedia') || url.includes('youtube') || url.includes('spotify')) {
           iframe.src = url;
-        } else if (url.includes('youtube.com')) {
-          if (url.includes('embed/videoseries')) {
-            iframe.src = url; // Playlist
-          } else {
-            const videoId = url.split('v=')[1]?.split('&')[0];
-            iframe.src = `https://www.youtube.com/embed/${videoId}`; // Video
-          }
-        } else if (url.includes('spotify.com')) {
-          const spotifyUrl = url.replace('open.spotify.com', 'embed.spotify.com');
-          iframe.src = spotifyUrl;
         }
 
-        modal.style.display = 'flex'; // Show modal (flex layout for centering)
+        modal.style.display = 'flex'; // Show modal
         adjustIframeHeight(); // Adjust iframe height on modal open
       });
     });
 
     // Close modal and clear iframe content
     closeModalButtons.forEach(button => {
-      button.addEventListener('click', function() {
+      button.addEventListener('click', function () {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
       });
     });
 
     // Close modal when clicking outside modal content
-    modal.addEventListener('click', function(event) {
+    modal.addEventListener('click', function (event) {
       if (event.target === modal) {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
diff --git a/music/albums2025.html b/music/albums2025.html
index 07e437ec5..21a6661a6 100644
--- a/music/albums2025.html
+++ b/music/albums2025.html
@@ -172,14 +172,14 @@ <h3>2025 Albums</h3><span class="fo-5">Discover the top-charting music albums ac
     </div></div>
 
 <!-- Modal Structure -->
-<div id="wikiModal" class="modal">
+<div id="modal" class="modal">
   <div class="modal-content">
     <div class="modal-header">
-      <h5 class="modal-title">Article or Video</h5>
+      <h5 class="modal-title">Content Viewer</h5>
       <button class="close-btn" id="closeModal">&times;</button>
     </div>
     <div class="modal-body">
-      <iframe id="wikiIframe" src="" allowfullscreen></iframe> <!-- Added allowfullscreen -->
+      <iframe id="contentIframe" src="" allowfullscreen allow="encrypted-media"></iframe>
     </div>
     <div class="modal-footer">
       <button class="close-btn" id="closeFooter">Close</button>
@@ -188,10 +188,10 @@ <h5 class="modal-title">Article or Video</h5>
 </div>
 
 <script>
-  document.addEventListener('DOMContentLoaded', function() {
-    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"]');
-    const modal = document.getElementById('wikiModal');
-    const iframe = document.getElementById('wikiIframe');
+  document.addEventListener('DOMContentLoaded', function () {
+    const links = document.querySelectorAll('a[href*="wikipedia"], a[href*="youtube"], a[href*="spotify"]');
+    const modal = document.getElementById('modal');
+    const iframe = document.getElementById('contentIframe');
     const closeModalButtons = document.querySelectorAll('#closeModal, #closeFooter');
 
     // Function to adjust iframe height
@@ -200,7 +200,7 @@ <h5 class="modal-title">Article or Video</h5>
       const headerHeight = document.querySelector('.modal-header').offsetHeight;
       const footerHeight = document.querySelector('.modal-footer').offsetHeight;
       const modalHeight = modalContent.offsetHeight;
-      
+
       // Set iframe height based on the remaining space
       const iframeHeight = modalHeight - headerHeight - footerHeight - 40; // 40px for padding
       iframe.style.height = iframeHeight + 'px';
@@ -208,39 +208,29 @@ <h5 class="modal-title">Article or Video</h5>
 
     // Open modal and set iframe source on click
     links.forEach(link => {
-      link.addEventListener('click', function(event) {
+      link.addEventListener('click', function (event) {
         event.preventDefault();
         const url = this.href;
 
-        if (url.includes('wikipedia')) {
+        if (url.includes('wikipedia') || url.includes('youtube') || url.includes('spotify')) {
           iframe.src = url;
-        } else if (url.includes('youtube.com')) {
-          if (url.includes('embed/videoseries')) {
-            iframe.src = url; // Playlist
-          } else {
-            const videoId = url.split('v=')[1]?.split('&')[0];
-            iframe.src = `https://www.youtube.com/embed/${videoId}`; // Video
-          }
-        } else if (url.includes('spotify.com')) {
-          const spotifyUrl = url.replace('open.spotify.com', 'embed.spotify.com');
-          iframe.src = spotifyUrl;
         }
 
-        modal.style.display = 'flex'; // Show modal (flex layout for centering)
+        modal.style.display = 'flex'; // Show modal
         adjustIframeHeight(); // Adjust iframe height on modal open
       });
     });
 
     // Close modal and clear iframe content
     closeModalButtons.forEach(button => {
-      button.addEventListener('click', function() {
+      button.addEventListener('click', function () {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed
       });
     });
 
     // Close modal when clicking outside modal content
-    modal.addEventListener('click', function(event) {
+    modal.addEventListener('click', function (event) {
       if (event.target === modal) {
         modal.style.display = 'none';
         iframe.src = ''; // Clear the iframe content when the modal is closed