03ef87c16c7fbb635b4d8f44f26cd6619f784661
lrnassar
  Thu Nov 17 16:42:40 2022 -0800
Optimizing load time on the index page, primarily by loading placeholder images in the iframes so we don't have to preload the yotube js, and by reducing the size of the banner image significantly. Refs #29695

diff --git src/hg/htdocs/indexTraining.html src/hg/htdocs/indexTraining.html
index ad496c2..dcf9463 100755
--- src/hg/htdocs/indexTraining.html
+++ src/hg/htdocs/indexTraining.html
@@ -1,25 +1,31 @@
 <div class="col-md-6">
   <h2>Learning</h2>
     <p>
-    <iframe width="32%" height="33%" src="https://www.youtube.com/embed/NBDMNv2KFik?rel=0"
-    frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-    allowfullscreen></iframe>
-    <iframe width="32%" height="33%" src="https://www.youtube.com/embed/1RkqDlEKnyU?rel=0"
-    frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-    allowfullscreen></iframe>
-    <iframe width="32%" height="33%" src="https://www.youtube.com/embed/d5rHBLXwraM?rel=0"
-    frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-    allowfullscreen></iframe>
+    <iframe width="32%" height="33%" src="https://www.youtube.com/embed/NBDMNv2KFik?rel=0" title="UCSC Genome Browser Basics Part 1"
+    srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}
+    span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a 
+    href=https://www.youtube.com/embed/NBDMNv2KFik?rel=0><img src=images/youtubeVideo1.jpg alt='UCSC Genome Browser Basics Part 1 tutorial video'></a>" 
+    frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
+    <iframe width="32%" height="33%" src="https://www.youtube.com/embed/1RkqDlEKnyU?rel=0" title="Intro to UCSC SARS-CoV-2 Browser"
+    srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}
+    span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a 
+    href=https://www.youtube.com/embed/1RkqDlEKnyU?rel=0><img src=images/youtubeVideo2.jpg alt='Introduction tutorial video to SARS-CoV-2 Genome Browser'></a>" 
+    frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
+    <iframe width="32%" height="33%" src="https://www.youtube.com/embed/d5rHBLXwraM?rel=0" title="Saving and Sharing Sessions in the Genome Browser"
+    srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img,span{position:absolute;width:100%;top:0;bottom:0;margin:auto}
+    span{height:1.5em;text-align:center;font:48px/1.5 sans-serif;color:white;text-shadow:0 0 0.5em black}</style><a 
+    href=https://www.youtube.com/embed/d5rHBLXwraM?rel=0><img src=images/youtubeVideo3.jpg alt='Tutorial video on saving and sharing sessions in the Genome 
+    Browser'></a>" frameborder="0" allow="accelerometer; encrypted-media; gyroscope; picture-in-picture" allowfullscreen=""></iframe>
     </p>
     
     <p>
     <ul>
     <li><a target="_blank" href="training/index.html">Training</a> - 
     Visit our training page for videos, manuals, and tutorials on the Genome Browser</li>
     <li><a target="_blank" href="training/education/index.html">Education</a> - 
     We offer teaching modules using the Genome Browser aimed at the undergraduate classroom</li>
     <li><b>Workshops</b> - If you would like to request a virtual or in-person workshop, please 
     <a href="mailto:genome-www@soe.ucsc.edu" target="_blank">contact us</a></li>    
     </ul> 
 
 </div>