[Demo] Fix (most) printing issues when trying to print the page (#3370)

* Most printing issues fixed * Fix for really large images in print mode
microsoft · Feb 15, 2025 · 88c5202 · 88c5202
1 parent f01b8df
commit 88c5202
Show file tree

Hide file tree

Showing 2 changed files with 220 additions and 110 deletions.
diff --git a/examples/Demo/Shared/Pages/Home/Videos.razor b/examples/Demo/Shared/Pages/Home/Videos.razor
@@ -10,14 +10,18 @@
 
 <FluentGrid Spacing="7">
     <FluentGridItem xs="12" sm="4">
-        <div class="youtube-title">.NET Conf 2024</div>
-            <div class="youtube-responsive">
+        <div class="youtube-title">.NET Conf 2024
+        </div>
+        <p class="video-link">Watch: <a href="https://www.youtube.com/watch?v=w8BKS1a8MnU">https://www.youtube.com/watch?v=w8BKS1a8MnU</a></p>
+
+        <div class="youtube-responsive">
             <iframe src="https://www.youtube.com/embed/w8BKS1a8MnU?si=ugsYLTHGhBrXdAhn" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
             </div>
     </FluentGridItem>
 
     <FluentGridItem xs="12" sm="4">
         <div class="youtube-title">ASP.NET Community Standup 2024</div>
+        <p class="video-link">Watch: <a href="https://www.youtube.com/watch?v=1fveBAi6Q7I">https://www.youtube.com/watch?v=1fveBAi6Q7I</a></p>
         <div class="youtube-responsive">
             <iframe src="https://www.youtube.com/embed/1fveBAi6Q7I" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
         </div>
@@ -27,24 +31,28 @@
 
     <FluentGridItem xs="12" sm="4">
         <div class="youtube-title" style="overflow: unset;">Open at Microsoft - 2024</div>
+        <p class="video-link">Watch: <a href="https://www.youtube.com/watch?v=lUZ5mrg2Q8k">https://www.youtube.com/watch?v=lUZ5mrg2Q8k</a></p>
         <div class="youtube-responsive">
             <iframe src="https://www.youtube.com/embed/lUZ5mrg2Q8k" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
         </div>
     </FluentGridItem>
     <FluentGridItem xs="12" sm="4">
         <div class="youtube-title"></div>
+        <p class="video-link">Watch: <a href="https://www.youtube.com/watch?v=jOv9ioCVDFU">https://www.youtube.com/watch?v=jOv9ioCVDFUI</a></p>
         <div class="youtube-responsive">
             <iframe src="https://www.youtube.com/embed/jOv9ioCVDFU" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
         </div>
     </FluentGridItem>
     <FluentGridItem xs="12" sm="4">
         <div class="youtube-title"></div>
+        <p class="video-link">Watch: <a href="https://www.youtube.com/watch?v=HTUemhV9W-M">https://www.youtube.com/watch?v=HTUemhV9W-M</a></p>
         <div class="youtube-responsive">
             <iframe src="https://www.youtube.com/embed/HTUemhV9W-M" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
         </div>
     </FluentGridItem>
     <FluentGridItem xs="12" sm="4">
         <div class="youtube-title">.NET Conf 2023</div>
+        <p class="video-link">Watch: <a href="https://www.youtube.com/watch?v=a0xOqNemRoY">https://www.youtube.com/watch?v=a0xOqNemRoY</a></p>
         <div class="youtube-responsive">
             <iframe src="https://www.youtube.com/embed/a0xOqNemRoY" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" referrerpolicy="strict-origin-when-cross-origin" allowfullscreen></iframe>
         </div>