url/SkillOpt
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Use YouTube teaser video

Browse Source
This commit is contained in:
Lliar-liar
2026-05-24 14:59:26 +00:00
parent 74cbe704fc
commit 9a064f7c97
3 changed files with 16 additions and 10 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+8 -5
View File
@@ -418,11 +418,12 @@
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
} }
.video-frame video { .video-frame iframe {
width: 100%; width: 100%;
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
display: block; display: block;
background: #0d1117; background: #0d1117;
border: 0;
border-radius: 4px; border-radius: 4px;
} }
@@ -1262,10 +1263,12 @@
</div> </div>
</div> </div>
<figure class="video-frame"> <figure class="video-frame">
<video controls preload="metadata" playsinline poster="skillopt-assets/teaser-1.png"> <iframe
<source src="skillopt-assets/skillopt_teaser.mp4" type="video/mp4"> src="https://www.youtube.com/embed/JUBMDTCiM0M"
Your browser does not support the video tag. title="SkillOpt project video"
</video> allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
</figure> </figure>
<p class="teaser-caption"> <p class="teaser-caption">
Promotional video for the SkillOpt project page. The static paper teaser is shown below for high-resolution inspection. Promotional video for the SkillOpt project page. The static paper teaser is shown below for high-resolution inspection.
skillopt-assets/skillopt_teaser.mp4
BIN
View File
Binary file not shown.
skillopt.html
+8 -5
View File
@@ -418,11 +418,12 @@
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08);
} }
.video-frame video { .video-frame iframe {
width: 100%; width: 100%;
aspect-ratio: 16 / 9; aspect-ratio: 16 / 9;
display: block; display: block;
background: #0d1117; background: #0d1117;
border: 0;
border-radius: 4px; border-radius: 4px;
} }
@@ -1262,10 +1263,12 @@
</div> </div>
</div> </div>
<figure class="video-frame"> <figure class="video-frame">
<video controls preload="metadata" playsinline poster="skillopt-assets/teaser-1.png"> <iframe
<source src="skillopt-assets/skillopt_teaser.mp4" type="video/mp4"> src="https://www.youtube.com/embed/JUBMDTCiM0M"
Your browser does not support the video tag. title="SkillOpt project video"
</video> allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen>
</iframe>
</figure> </figure>
<p class="teaser-caption"> <p class="teaser-caption">
Promotional video for the SkillOpt project page. The static paper teaser is shown below for high-resolution inspection. Promotional video for the SkillOpt project page. The static paper teaser is shown below for high-resolution inspection.