From 87275aca53c6e5e5502b2bb023e2d67f43841ea7 Mon Sep 17 00:00:00 2001
From: Prasanth Pulavarthi <prasantp@microsoft.com>
Date: Thu, 12 Jan 2023 13:01:00 -0800
Subject: [PATCH] Video carousel on website (#14223)

### Description
Moved video resources up on page and makes them into a carousel.

Implements videos as iframe for embedded playing

Staged at https://prasanthpul.github.io/onnxruntime/

Co-authored-by: Cassie Breviu <46505951+cassiebreviu@users.noreply.github.com>
---
 css/custom.css |  25 +++++++++++-
 index.html     | 103 ++++++++++++++++++++++++++++++-------------------
 2 files changed, 87 insertions(+), 41 deletions(-)

diff --git a/css/custom.css b/css/custom.css
index 74b9bfd8d7..0afbbfd021 100644
--- a/css/custom.css
+++ b/css/custom.css
@@ -146,10 +146,13 @@ a.link:active .link-arrow{
 .get-started-section h2{
     font-size:34px;
 }
-.carousel, .tab-wrapper{
+.tab-wrapper{
     margin: 3rem auto;
     padding: 0 70px;
 }
+.carousel{
+    padding: 0 70px;
+}
 .carousel .item,
 .tab-wrapper .item{
     color: #000;
@@ -165,6 +168,10 @@ a.link:active .link-arrow{
 .carousel .testimonial, .tab-wrapper .testimonial{
     position: relative;
 }
+.video{
+    max-width: 100%;
+    aspect-ratio: 16 / 9;
+}
 .carousel p, .tab-wrapper p{
     font-size:26px;
     font-weight: bold;
@@ -174,7 +181,20 @@ a.link:active .link-arrow{
     margin-bottom: 30px;
     font-weight: normal;
 }
-
+.carousel-control-prev {
+    width: 5%; 
+    justify-content: left;
+}
+.carousel-control-next {
+    width: 5%; 
+    justify-content: right;
+}
+.carousel-control-prev-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3e%3cpath d='M5.25 0l-4 4 4 4 1.5-1.5-2.5-2.5 2.5-2.5-1.5-1.5z'/%3e%3c/svg%3e")
+}
+.carousel-control-next-icon {
+    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='%23000' viewBox='0 0 8 8'%3e%3cpath d='M2.75 0l-1.5 1.5 2.5 2.5-2.5 2.5 1.5 1.5 4-4-4-4z'/%3e%3c/svg%3e")
+}
 .carousel .carousel-indicators {
     bottom: -40px;
 }
@@ -706,6 +726,7 @@ a .abbr[data-original-title], a abbr[title]{
 }
 .row.blue-title-columns{
     margin-bottom:5px;
+    text-align: center;
 }
 .blue-title-columns div.quote-attribution{
     font-size: 18px;
diff --git a/index.html b/index.html
index 25acb47387..b97957b677 100644
--- a/index.html
+++ b/index.html
@@ -337,6 +337,67 @@
 	                    </div>
 	                </section>
 	
+					<section class="py-md-5 pb-4 pt-4 border-top">
+						<div class="container-fluid">
+							<div class="row ml-0">
+								<div class="col mb-4">
+									<div class="text-center pb-3">
+										<h2 class="section-heading">ONNX Runtime YouTube Videos</h2>
+									</div>
+								</div>
+							</div>
+
+							<div id="carouselExampleControls" class="carousel slide" data-ride="carousel">
+								<ol class="carousel-indicators">
+									<li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
+									<li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
+								</ol>
+								<div class="carousel-inner">
+								  	<div class="carousel-item active">
+										<div class="row blue-title-columns">
+											<div class="col-12 col-md-3 mb-4 mb-md-0">
+												<iframe class="video" src="https://www.youtube.com/embed/lRBsmnBE9ZA" title="Convert Models to ONNX" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+											</div>
+											<div class="col-12 col-md-3 mb-4 mb-md-0">
+												<iframe class="video" src="https://www.youtube.com/embed/LX1w_etaftY" title="Unreal Engine ORT Plugin" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+											</div>
+											<div class="col-12 col-md-3 mb-4 mb-md-0">
+												<iframe class="video" src="https://www.youtube.com/embed/imjqRdsm2Qw" title="C++ and OnnxRuntime" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+											</div>
+											<div class="col-12 col-md-3 mb-4 mb-md-0">
+												<iframe class="video" src="https://www.youtube.com/embed/vo9vlR-TRK4" title="v1.13 Release Review" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+											</div>
+										</div>
+									</div>
+								  	<div class="carousel-item">
+										<div class="row blue-title-columns">
+											<div class="col-12 col-md-3 mb-4 mb-md-0">
+												<iframe class="video" src="https://www.youtube.com/embed/vYzWrT3A7wQ" title="JavaScript with ONNX Runtime Web!" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+											</div>
+											<div class="col-12 col-md-3 mb-4 mb-md-0">
+												<iframe class="video" src="https://www.youtube.com/embed/Z8SX5oXF7dM" title="Computer vision C# with ONNX Runtime!" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+											</div>
+											<div class="col-12 col-md-3 mb-4 mb-md-0" >
+												<iframe class="video" src="https://www.youtube.com/embed/W_lUGPMW_Eg" title="Deploy Transformer Models in the Browser with #ONNXRuntime" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+											</div>
+											<div class="col-12 col-md-3 mb-4 mb-md-0">
+												<iframe class="video" src="https://www.youtube.com/embed/7gDrt-SQZc8" title="BERT NLP with C# ONNX Runtime" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" allowfullscreen></iframe>
+											</div>
+										</div>
+									</div>
+								</div>
+								<a class="carousel-control-prev" href="#carouselExampleControls" role="button" data-slide="prev">
+								  <span class="carousel-control-prev-icon" aria-hidden="true"></span>
+								  <span class="sr-only">Previous</span>
+								</a>
+								<a class="carousel-control-next" href="#carouselExampleControls" role="button" data-slide="next">
+								  <span class="carousel-control-next-icon" aria-hidden="true"></span>
+								  <span class="sr-only">Next</span>
+								</a>
+							</div>
+						</div>
+					</section>
+
 					<section class="py-md-5 pb-4 pt-4 border-top" id="logos">
 						<div class="container-fluid">
 							<div class="row ml-0">
@@ -421,7 +482,8 @@
 							<div class="row equalHeight-3 blue-title-columns">
 								<div class="col-4 col-md-2 mb-4 mb-md-0">
 									<div class="customer-logo text-center">
-										<a href="community.html#navitaire"><img src="./images/logos/navitaire-amadeus-logo.png" alt="Navitaire Amadeus logo"></a>									</div>
+										<a href="community.html#navitaire"><img src="./images/logos/navitaire-amadeus-logo.png" alt="Navitaire Amadeus logo"></a>
+									</div>
 								</div>
 								<div class="col-4 col-md-2 mb-4 mb-md-0">
 									<div class="customer-logo text-center">
@@ -518,44 +580,7 @@
 						
 						</div>
 					</section>
-
-					
-					<section class="py-md-5 pb-4 pt-4 border-top">
-						<div class="container-fluid">
-							<div class="row ml-0">
-								<div class="col mb-4">
-									<div class="text-center pb-3">
-										<h2 class="section-heading">Resources​​</h2>
-									</div>
-								</div>
-							</div>
-							<div class="row blue-title-columns">
-								
-								<div class="col-12 col-md-3 mb-4 mb-md-0">
-									<a class="resources-img text-center p-0 border-0" target="_blank" href="https://www.youtube.com/playlist?list=PLqPV7GJuaUV9a_ikjn4QqWMKHjGKdjPjb" aria-label="Review the most recent ONNX Runtime Release!">
-										<img src="./images/youtube-release.png" alt="Open Source" />
-									</a>
-
-								</div>
-								<div class="col-12 col-md-3 mb-4 mb-md-0">
-									<a class="resources-img text-center p-0 border-0" href="https://youtu.be/lRBsmnBE9ZA" target="_blank" aria-label="Converting Models to ONNX Format">
-										<img src="./images/youtube-convert.png" alt="Open Source" />
-									</a>
-								</div>
-								<div class="col-12 col-md-3 mb-4 mb-md-0">
-									<a class="resources-img text-center p-0 border-0" href="https://youtu.be/imjqRdsm2Qw" target="_blank" aria-label="Inference with C++">
-										<img src="./images/youtube-cpp.png" alt="Open Source" />
-									</a>
-								</div>
-
-								<div class="col-12 col-md-3">
-									<a class="resources-img text-center p-0 border-0" href="https://youtu.be/oWYphpV6A40" target="_blank" aria-label="Inference in Unreal Engine">
-										<img src="./images/youtube-ue5.png" alt="Open Source" />
-									</a>
-								</div>
-							</div>
-						</div>
-					</section>
+				
 	            </div>	
 			</div>
         </div>