kforney/kforney.github.io
1
0
Fork 0
mirror of https://github.com/kforney/kforney.github.io.git synced 2025-02-22 20:48:40 -07:00
Code Issues Projects Releases Packages Wiki Activity

Style/formatting changes for videos.

Browse source
This commit is contained in:
Kaj Forney 2023-02-23 12:48:48 -07:00
parent 5aad2cb576
commit 5132324f86
Signed by: kforney
GPG key ID: 3AB4E2E04CEF656F
2 changed files with 68 additions and 52 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

2
css/main.css
View file

@ -246,6 +246,7 @@ iframe[src*=itch] {
.game-link { .game-link {
text-decoration: none; text-decoration: none;
color: #78a1bb; color: #78a1bb;
font-family: "VT323",sans-serif;
} }
.game-link:hover { .game-link:hover {
@ -264,6 +265,7 @@ and was then modified by me as necessary.*/
overflow: hidden; overflow: hidden;
cursor: pointer; cursor: pointer;
border-radius: 40px; border-radius: 40px;
box-shadow: #B17300 0px 0px 10px;
} }
.youtube-video img { .youtube-video img {

80
index.html
View file

@ -116,15 +116,19 @@
<div class="mt-4"></div> <div class="mt-4"></div>
<div class="row"> <div class="row">
<div class="col"> <div class="col-sm-2"></div>
<div class="col-sm-8">
<div class="youtube-video" data-embed="N5unzGlC9ME"> <div class="youtube-video" data-embed="N5unzGlC9ME">
<div class="playButton"></div> <div class="playButton"></div>
</div> </div>
</div> </div>
<div class="col-sm-2"></div>
</div> </div>
<div class="row mt-3"> <div class="row mt-3">
<iframe loading="lazy" src="https://itch.io/embed/1308115?border_width=0&amp;bg_color=12161f&amp;fg_color=78a1bb&amp;link_color=ffbc42&amp;border_color=283044" aria-label="The Climb on Itch.io"> <iframe loading="lazy"
src="https://itch.io/embed/1308115?border_width=0&amp;bg_color=12161f&amp;fg_color=78a1bb&amp;link_color=ffbc42&amp;border_color=283044"
aria-label="The Climb on Itch.io">
<a href="https://lunarpenguin.itch.io/the-climb">The Climb by Lunar_Penguin</a></iframe> <a href="https://lunarpenguin.itch.io/the-climb">The Climb by Lunar_Penguin</a></iframe>
</div> </div>
@ -150,7 +154,9 @@
<div class="mt-4"></div> <div class="mt-4"></div>
<div class="row mt-3"> <div class="row mt-3">
<iframe loading="lazy" src="https://itch.io/embed/689456?border_width=0&amp;bg_color=12161f&amp;fg_color=78a1bb&amp;link_color=ffbc42&amp;border_color=283044" aria-label="Last Minute on Itch.io"> <iframe loading="lazy"
src="https://itch.io/embed/689456?border_width=0&amp;bg_color=12161f&amp;fg_color=78a1bb&amp;link_color=ffbc42&amp;border_color=283044"
aria-label="Last Minute on Itch.io">
<a href="https://lunarpenguin.itch.io/last-minute">Last Minute by Lunar_Penguin</a></iframe> <a href="https://lunarpenguin.itch.io/last-minute">Last Minute by Lunar_Penguin</a></iframe>
</div> </div>
</div> </div>
@ -194,21 +200,19 @@
<div class="mt-5"></div> <div class="mt-5"></div>
<div class="row"> <div class="row">
<div class="col"> <div class="col-sm-2"></div>
<div class="col-sm-8">
<div class="youtube-video" data-embed="nra31mia8Y0"> <div class="youtube-video" data-embed="nra31mia8Y0">
<div class="playButton"></div> <div class="playButton"></div>
</div> </div>
<!--<iframe class="youtube-iframe" width="560" height="315" </div>
src="https://www.youtube-nocookie.com/embed/nra31mia8Y0" title="YouTube video player" <div class="col-sm-2"></div>
frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowfullscreen loading="lazy"></iframe>-->
</div>
</div> </div>
</div> </div>
</div> </div>
</div>
<div class="container-md card mt-5"> <div class="container-md card mt-5">
<div class="card-body"> <div class="card-body">
<div class="row mt-5"> <div class="row mt-5">
<div class="col-sm-4"> <div class="col-sm-4">
@ -229,11 +233,13 @@
<div class="mt-4"></div> <div class="mt-4"></div>
<div class="row mt-3"> <div class="row mt-3">
<iframe loading="lazy" src="https://itch.io/embed/630032?border_width=0&amp;bg_color=12161f&amp;fg_color=78a1bb&amp;link_color=ffbc42&amp;border_color=283044" aria-label="Megashigi on Itch.io"> <iframe loading="lazy"
src="https://itch.io/embed/630032?border_width=0&amp;bg_color=12161f&amp;fg_color=78a1bb&amp;link_color=ffbc42&amp;border_color=283044"
aria-label="Megashigi on Itch.io">
<a href="https://lopar.itch.io/megashigi">MEGASHIGI by Lopar</a></iframe> <a href="https://lopar.itch.io/megashigi">MEGASHIGI by Lopar</a></iframe>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div id="art"></div> <div id="art"></div>
@ -271,46 +277,53 @@
</div> </div>
<div class="carousel-inner"> <div class="carousel-inner">
<div class="carousel-item active"> <div class="carousel-item active">
<img src="img/art/rakuenDoor.webp" class="d-block w-100" alt="A 3D rendering of a magical door floating in a void." loading="lazy"> <img src="img/art/rakuenDoor.webp" class="d-block w-100"
alt="A 3D rendering of a magical door floating in a void." loading="lazy">
<div class="carousel-caption d-none d-md-block"> <div class="carousel-caption d-none d-md-block">
<h5 class="text-shadow">RAKUEN ART [2022]</h5> <h5 class="text-shadow">RAKUEN ART [2022]</h5>
<p class="text-shadow">A scene from the game <i>Rakuen</i>, recreated in Blender.</p> <p class="text-shadow">A scene from the game <i>Rakuen</i>, recreated in Blender.</p>
</div> </div>
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img src="img/art/airship1.webp" class="d-block w-100" alt="A 3D rendering of a sci-fi airship." loading="lazy"> <img src="img/art/airship1.webp" class="d-block w-100" alt="A 3D rendering of a sci-fi airship."
loading="lazy">
<div class="carousel-caption d-none d-md-block"> <div class="carousel-caption d-none d-md-block">
<h5 class="text-shadow">AIRSHIP MODEL [2022]</h5> <h5 class="text-shadow">AIRSHIP MODEL [2022]</h5>
<p class="text-shadow">Created in Blender</p> <p class="text-shadow">Created in Blender</p>
</div> </div>
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img src="img/art/airship2.webp" class="d-block w-100" alt="A 3D rendering of a sci-fi airship." loading="lazy"> <img src="img/art/airship2.webp" class="d-block w-100" alt="A 3D rendering of a sci-fi airship."
loading="lazy">
<div class="carousel-caption d-none d-md-block"> <div class="carousel-caption d-none d-md-block">
<h5 class="text-shadow">AIRSHIP MODEL [2022]</h5> <h5 class="text-shadow">AIRSHIP MODEL [2022]</h5>
<p class="text-shadow">Created in Blender.</p> <p class="text-shadow">Created in Blender.</p>
</div> </div>
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img src="img/art/cat.webp" class="d-block w-100" alt="A digital painting of a tabby cat." loading="lazy"> <img src="img/art/cat.webp" class="d-block w-100" alt="A digital painting of a tabby cat."
loading="lazy">
<div class="carousel-caption d-none d-md-block"> <div class="carousel-caption d-none d-md-block">
<h5 class="text-shadow">DIGITAL PORTRAIT [2021]</h5> <h5 class="text-shadow">DIGITAL PORTRAIT [2021]</h5>
<p class="text-shadow">A digital painting of my cat, Okapi.</p> <p class="text-shadow">A digital painting of my cat, Okapi.</p>
</div> </div>
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img src="img/art/portrait_dad.webp" class="d-block w-100" alt="Digital art of a man's face." loading="lazy"> <img src="img/art/portrait_dad.webp" class="d-block w-100" alt="Digital art of a man's face."
loading="lazy">
<div class="carousel-caption d-none d-md-block"> <div class="carousel-caption d-none d-md-block">
<h5 class="text-shadow"></h5> <h5 class="text-shadow"></h5>
<p class="text-shadow"></p> <p class="text-shadow"></p>
</div> </div>
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img src="img/art/dadKaj.webp" class="d-block w-100" alt="Digital art of a father and son, standing next to a radio antenna." loading="lazy"> <img src="img/art/dadKaj.webp" class="d-block w-100"
alt="Digital art of a father and son, standing next to a radio antenna." loading="lazy">
<div class="carousel-caption d-none d-md-block"></div> <div class="carousel-caption d-none d-md-block"></div>
</div> </div>
<div class="carousel-item"> <div class="carousel-item">
<img src="img/art/symbolSet_fullSet.webp" class="d-block w-100" alt="A collection of robot faces, made with vector art." loading="lazy"> <img src="img/art/symbolSet_fullSet.webp" class="d-block w-100"
alt="A collection of robot faces, made with vector art." loading="lazy">
<div class="carousel-caption d-none d-md-block"> <div class="carousel-caption d-none d-md-block">
<h5 class="text-shadow"></h5> <h5 class="text-shadow"></h5>
<p class="text-shadow"></p> <p class="text-shadow"></p>
@ -439,27 +452,28 @@
//This script is for improving page performance by not loading YouTube iFrames until actually necessary. //This script is for improving page performance by not loading YouTube iFrames until actually necessary.
//Code is originally from https://stackoverflow.com/questions/50410828/how-to-prevent-youtube-js-calls-from-slowing-down-page-load //Code is originally from https://stackoverflow.com/questions/50410828/how-to-prevent-youtube-js-calls-from-slowing-down-page-load
//and was then modified by me as necessary. //and was then modified by me as necessary.
let youtube = document.querySelectorAll( ".youtube-video" ); let youtube = document.querySelectorAll(".youtube-video");
for (let i = 0; i < youtube.length; i++) { for (let i = 0; i < youtube.length; i++) {
let source = "https://img.youtube.com/vi/"+ youtube[i].dataset.embed +"/maxresdefault.jpg"; let source = "https://img.youtube.com/vi/" + youtube[i].dataset.embed + "/maxresdefault.jpg";
let image = new Image(); let image = new Image();
image.src = source; image.src = source;
image.addEventListener( "load", function() { image.alt = "YouTube thumbnail image.";
youtube[ i ].appendChild( image ); image.addEventListener("load", function () {
}( i ) ); youtube[i].appendChild(image);
}(i));
youtube[i].addEventListener( "click", function() { youtube[i].addEventListener("click", function () {
let iframe = document.createElement( "iframe" ); let iframe = document.createElement("iframe");
iframe.setAttribute( "frameborder", "0" ); iframe.setAttribute("frameborder", "0");
iframe.setAttribute( "allowfullscreen", "" ); iframe.setAttribute("allowfullscreen", "");
iframe.setAttribute( "allow", "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"); iframe.setAttribute("allow", "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture");
iframe.setAttribute( "src", "https://www.youtube-nocookie.com/embed/"+ this.dataset.embed +"?rel=0&showinfo=0&autoplay=1" ); iframe.setAttribute("src", "https://www.youtube-nocookie.com/embed/" + this.dataset.embed + "?rel=0&showinfo=0&autoplay=1");
this.innerHTML = ""; this.innerHTML = "";
this.appendChild( iframe ); this.appendChild(iframe);
} ); });
} }