Add demo video section for Pulumi IDP with embedded YouTube video and description. (#15267)

Author: adamgordonbell

content/product/internal-developer-platforms.md

@@ -36,6 +36,11 @@ why_idp:
       icon: cycle
       color: fuchsia
 
+demo_video:
+    title: See Pulumi IDP in Action
+    subtitle: Watch how platform teams build secure, standardized infrastructure
+    image: https://www.youtube.com/watch?v=3gZmKaAeppc
+
 building_blocks:
   title: "Pulumi IDP: Building Blocks for Your Internal Developer Platform"
   items:

layouts/product/internal-developer-platforms.html

@@ -5,16 +5,31 @@
 {{ define "main" }}
     {{ $pageContext := . }}
 
-    <section id="overview" class="my-8 relative">
-        <div class="container mx-auto">
-            <h5 class="mx-auto text-center text-gray-600 w-3/4 text-xl">
-                {{ .Params.overview.description | markdownify }}
-            </h5>
-        </div>
-        <div class="container mx-auto text-center pt-8 w-9/12">
-            <a href="{{ .Params.overview.link }}" class="btn-primary">{{ .Params.overview.cta}}</a>
+    {{ if .Params.demo_video }}
+    <section id="demo-video" class="container mx-auto my-16 flex flex-col">
+        <div class="flex flex-col lg:flex-row px-8">
+            <div class="w-full lg:w-1/2 lg:pr-8 order-last lg:order-first">
+                <h2 class="text-2xl mb-4">Accelerate Cloud Delivery</h2>
+                <h5 class="text-gray-600 text-xl">{{ .Params.overview.description | markdownify }}</h5>
+                <div class="mt-8 text-center">
+                    <a href="{{ .Params.overview.link }}" class="btn-primary">{{ .Params.overview.cta}}</a>
+                </div>
+            </div>
+            <div class="w-full lg:w-1/2 mb-8 lg:mb-0">
+                <div class="rounded-xl shadow-2xl relative h-0 overflow-hidden" style="padding-bottom: 56.25%;">
+                    {{ $videoID := index (split .Params.demo_video.image "?v=") 1 }}
+                    <iframe
+                        src="https://www.youtube.com/embed/{{ $videoID }}?rel=0"
+                        style="position: absolute; top: 0; left: 0; width: 100%; height: 100%; border:0;"
+                        allowfullscreen=""
+                        title="{{ .Params.demo_video.title }}"
+                        srcdoc="<style>*{padding:0;margin:0;overflow:hidden}html,body{height:100%}img{position:absolute;width:100%;top:0;bottom:0;margin:auto}.play-button{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:120px;height:120px;background:rgba(255,255,255,0.9);border-radius:50%;display:flex;align-items:center;justify-content:center;transition:all 0.3s;box-shadow:0 8px 25px rgba(0,0,0,0.3)}.play-button:hover{background:rgba(255,255,255,1);transform:translate(-50%,-50%) scale(1.1);box-shadow:0 12px 35px rgba(0,0,0,0.4)}.play-button::after{content:'';border-left:36px solid #ff6b35;border-top:22px solid transparent;border-bottom:22px solid transparent;margin-left:8px}</style><a href=https://www.youtube.com/embed/{{ $videoID }}?autoplay=1><img src='https://img.youtube.com/vi/{{ $videoID }}/maxresdefault.jpg' alt='{{ .Params.demo_video.title }}'><div class='play-button'></div></a>"
+                    ></iframe>
+                </div>
+            </div>
         </div>
     </section>
+    {{ end }}
 
     <section id="benefits" class="container mx-auto my-16">
         {{ with .Params.why_idp }}