kforney/kforney.github.io
1
0
Fork 0
mirror of https://github.com/kforney/kforney.github.io.git synced 2025-02-22 12:48:39 -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 {

118
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,47 +200,47 @@
<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">
<h2> <h2>
<a class="game-link" href="https://lopar.itch.io/megashigi">Megashigi</a> <a class="game-link" href="https://lopar.itch.io/megashigi">Megashigi</a>
</h2> </h2>
<hr/> <hr/>
<p>[2020, Win/Mac/Linux]</p> <p>[2020, Win/Mac/Linux]</p>
</div>
<div class="col-sm-8">
<p>Megashigi is a game that I helped create using the Godot Engine, along with several friends, as a
birthday gift. My portion of the project included the implementation of the game's playable,
interactive credits sequence, as well as general level design, and subtitles for the game's boss
rap sequence.</p>
</div>
</div> </div>
<div class="col-sm-8">
<div class="mt-4"></div> <p>Megashigi is a game that I helped create using the Godot Engine, along with several friends, as a
birthday gift. My portion of the project included the implementation of the game's playable,
<div class="row mt-3"> interactive credits sequence, as well as general level design, and subtitles for the game's boss
<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"> rap sequence.</p>
<a href="https://lopar.itch.io/megashigi">MEGASHIGI by Lopar</a></iframe>
</div> </div>
</div> </div>
<div class="mt-4"></div>
<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">
<a href="https://lopar.itch.io/megashigi">MEGASHIGI by Lopar</a></iframe>
</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);
} ); });
} }