hi hi! if you like my f2u codes, pls consider supporting with a kofi!
<!-------------------------------------------------
F2U YT Video Playlist — Bootstrap Version
(code by jiko)
------------------------------
RULES
> Read this thoroughly please, and maybe drop a small comment saying that you've read it? :'3
thank youu [ https://toyhou.se/~bulletins/127417.code-rules ]
> turn OFF WYSIWYG (in display settings)
> turn ON Code Editor
------------------------------
TIPPY TIPS
> insert your img links INSIDE or quotation marks!!
> looking for a good online code editor? try [ https://th.circlejourney.net/# ] !
------------------------------------------------->
<div class="mx-auto" style="max-width:1000px">
<!-------------------------------------------------
INTRODUCTION
------------------------------------------------->
<div class="my-0">
<!-- TITLE
---------------------------------------------->
<div class="display-4" style="font-family:georgia; font-weight:900">
<i class="fa-duotone fa-film fa-sm mr-2"></i>
Title Here
</div>
<!-- SUMMARY
---------------------------------------------->
<div class="card border-0 rounded-0 p-3 bg-faded text-muted mt-2">
<p><i class="fa-light fa-angle-right mr-1"></i>
A summary of the playlist and what it is about. Is it a music playlist, where each song relates to the character/story? Is it an AMV/PMV/animatic playlist of your character/story? Or is this a collection of character shitposts? Or is this your character's playlist and you are exposing what they'd like ?????! Whatever your heart desires~
</p>
<p><i class="fa-light fa-angle-right mr-1"></i>
Everything can be as short or long as you want; this specific card does not scroll!
</p>
</div>
</div>
<hr>
<div class="row no-gutters m-n1">
<!-------------------------------------------------
PLAYLIST (TAB BUTTONS)
------------------------------------------------->
<div class="col-lg-4 p-1 order-lg-1 order-2 flex-column">
<!-- PLAYLIST NAME + LINK
---------------------------------------------->
<div class="flex-grow-2">
<div class="jumbotron p-3 mb-0 rounded-0">
<div class="justify-content-between align-items-center" style="font-size:18px; line-height:18px;">
<!-- you can leave it as 'playlist' if u want -->
<div style="font-family:georgia; font-weight:900">
Playlist Name
</div>
<!-- youtube link to playlist -->
<a href="LINK_TO_YT_PLAYLIST" class="tooltipster ml-3" title="Link to Playlist">
<i class="fa-solid fa-share-from-square"></i>
</a>
</div>
</div>
</div>
<!-- VIDEO SELECT
---------------------------------------------->
<div class="flex-grow-1 flex-column">
<div class="card rounded-0 border-0 bg-faded p-2" style="flex:1 1 250px; min-height:250px; overflow-y:auto">
<ul class="nav flex-column">
<!-- 01 VIDEO ---------------------------->
<li class="nav-item card rounded-0">
<div class="row no-gutters">
<div class="col-4">
<!-- THUMBNAIL IMAGE -->
<div class="justify-content-end align-items-end p-2 h-100 bg-dark" style="min-height:80px;
background-image:url(IMG_ADDRESS_HERE);
background-size:cover;
background-position:center">
<!-- VIDEO LENGTH -->
<span class="badge text-white" style="background:rgba(0,0,0,0.6)">0:00</span>
</div>
</div>
<div class="col">
<div class="card h-100 border-0 rounded-0 p-2">
<div class="font-weight-bold">
Video Title
</div>
<div class="mt-auto text-monospace small faded">
by Uploader
</div>
</div>
</div>
</div>
<!-- pay attention to the href! -->
<a href="#one" data-toggle="tab" class="active rounded-0 nav-link border-0 btn btn-outline-secondary w-100" style="position:absolute; top:0px; left:0; right:0; bottom:0; opacity:0.3"></a>
</li>
<!-- 02 VIDEO ---------------------------->
<li class="nav-item card rounded-0 mt-2">
<div class="row no-gutters">
<div class="col-4">
<!-- THUMBNAIL IMAGE -->
<div class="justify-content-end align-items-end p-2 h-100 bg-dark" style="min-height:80px;
background-image:url(IMG_ADDRESS_HERE);
background-size:cover;
background-position:center">
<!-- VIDEO LENGTH -->
<span class="badge text-white" style="background:rgba(0,0,0,0.6)">0:00</span>
</div>
</div>
<div class="col">
<div class="card h-100 border-0 rounded-0 p-2">
<div class="font-weight-bold">
Video Title
</div>
<div class="mt-auto text-monospace small faded">
by Uploader
</div>
</div>
</div>
</div>
<!-- pay attention to the href! -->
<a href="#two" data-toggle="tab" class="rounded-0 nav-link border-0 btn btn-outline-secondary w-100" style="position:absolute; top:0px; left:0; right:0; bottom:0; opacity:0.3"></a>
</li>
<!-- 03 VIDEO ---------------------------->
<li class="nav-item card rounded-0 mt-2">
<div class="row no-gutters">
<div class="col-4">
<!-- THUMBNAIL IMAGE -->
<div class="justify-content-end align-items-end p-2 h-100 bg-dark" style="min-height:80px;
background-image:url(IMG_ADDRESS_HERE);
background-size:cover;
background-position:center">
<!-- VIDEO LENGTH -->
<span class="badge text-white" style="background:rgba(0,0,0,0.6)">0:00</span>
</div>
</div>
<div class="col">
<div class="card h-100 border-0 rounded-0 p-2">
<div class="font-weight-bold">
Video Title
</div>
<div class="mt-auto text-monospace small faded">
by Uploader
</div>
</div>
</div>
</div>
<!-- pay attention to the href! -->
<a href="#three" data-toggle="tab" class="rounded-0 nav-link border-0 btn btn-outline-secondary w-100" style="position:absolute; top:0px; left:0; right:0; bottom:0; opacity:0.3"></a>
</li>
<!-- add more above this line! -->
</ul>
</div>
</div>
</div>
<!-------------------------------------------------
VIDEO (TAB CONTENT)
------------------------------------------------->
<div class="col-lg p-1 order-lg-2 order-1">
<div class="tab-content">
<!-- 01 VIDEO
---------------------------------------------->
<div class="tab-pane active show" id="one">
<div class="card rounded-0 border-0 bg-faded p-2">
<!-- YOUTUBE EMBED ----------------------->
<div class="mb-2">
<div class="card rounded-0 h-100 p-2">
<!--
> replace [ VIDEO_ID ] with your youtube video ID (the string of numbers and letters)
> this is found AFTER https://www.youtube.com/watch?v=
-->
<iframe src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0"
class="w-100 h-100"
style="min-height:330px"></iframe>
</div>
</div>
<!-- VIDEO DESCRIPTION -------------------------->
<div class="mb-0">
<div class="card p-3 rounded-0" style="height:200px; overflow-y:auto; overflow-x:hidden">
<div style="font-size:18px; line-height:18px; font-family:georgia; font-weight:900">
Video Title Here
</div>
<div class="text-monospace small text-muted mt-1">
by UPLOADER
</div>
<hr class="w-100 mt-2">
<!-- WARNINGS -->
<!--
> [alert-danger] for explicit content
> [alert-warning] for moderate content
> [alert-success] for no warnnings but if there's anything you want "tagged" anyways, use this!
-->
<div class="d-flex flex-row m-n1 font-italic" style="flex-wrap:wrap; line-height:16px">
<div class="flex-grow-2 m-1">
<div class="alert alert-danger p-1 px-2 small font-weight-bold text-center rounded-0 w-100 mb-0">
warnings
</div>
</div>
<div class="flex-grow-2 m-1">
<div class="alert alert-warning p-1 px-2 small font-weight-bold text-center rounded-0 w-100 mb-0">
or something more mild
</div>
</div>
<div class="flex-grow-2 m-1">
<div class="alert alert-success p-1 px-2 small font-weight-bold text-center rounded-0 w-100 mb-0">
or no warnings applicable
</div>
</div>
<!-- add more above this line! -->
</div>
<hr class="w-100 mb-2">
<!-- SUMMARY -->
<div class="text-justify">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
<p>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
</div>
</div>
<!-- 02 VIDEO
---------------------------------------------->
<div class="tab-pane" id="two">
<div class="card rounded-0 border-0 bg-faded p-2">
<!-- YOUTUBE EMBED ----------------------->
<div class="mb-2">
<div class="card rounded-0 h-100 p-2">
<!--
> replace [ VIDEO_ID ] with your youtube video ID (the string of numbers and letters)
> this is found AFTER https://www.youtube.com/watch?v=
-->
<iframe src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0"
class="w-100 h-100"
style="min-height:330px"></iframe>
</div>
</div>
<!-- VIDEO DESCRIPTION -------------------------->
<div class="mb-0">
<div class="card p-3 rounded-0" style="height:200px; overflow-y:auto; overflow-x:hidden">
<div style="font-size:18px; line-height:18px; font-family:georgia; font-weight:900">
Video Title Here
</div>
<div class="text-monospace small text-muted mt-1">
by UPLOADER
</div>
<hr class="w-100 mt-2">
<!-- WARNINGS -->
<!--
> [alert-danger] for explicit content
> [alert-warning] for moderate content
> [alert-success] for no warnnings but if there's anything you want "tagged" anyways, use this!
-->
<div class="d-flex flex-row m-n1 font-italic" style="flex-wrap:wrap; line-height:16px">
<div class="flex-grow-2 m-1">
<div class="alert alert-danger p-1 px-2 small font-weight-bold text-center rounded-0 w-100 mb-0">
warnings
</div>
</div>
<div class="flex-grow-2 m-1">
<div class="alert alert-warning p-1 px-2 small font-weight-bold text-center rounded-0 w-100 mb-0">
or something more mild
</div>
</div>
<div class="flex-grow-2 m-1">
<div class="alert alert-success p-1 px-2 small font-weight-bold text-center rounded-0 w-100 mb-0">
or no warnings applicable
</div>
</div>
<!-- add more above this line! -->
</div>
<hr class="w-100 mb-2">
<!-- SUMMARY -->
<div class="text-justify">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
<p>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
</div>
</div>
<!-- 03 VIDEO
---------------------------------------------->
<div class="tab-pane" id="three">
<div class="card rounded-0 border-0 bg-faded p-2">
<!-- YOUTUBE EMBED ----------------------->
<div class="mb-2">
<div class="card rounded-0 h-100 p-2">
<!--
> replace [ VIDEO_ID ] with your youtube video ID (the string of numbers and letters)
> this is found AFTER https://www.youtube.com/watch?v=
-->
<iframe src="https://www.youtube.com/embed/VIDEO_ID"
frameborder="0"
class="w-100 h-100"
style="min-height:330px"></iframe>
</div>
</div>
<!-- VIDEO DESCRIPTION -------------------------->
<div class="mb-0">
<div class="card p-3 rounded-0" style="height:200px; overflow-y:auto; overflow-x:hidden">
<div style="font-size:18px; line-height:18px; font-family:georgia; font-weight:900">
Video Title Here
</div>
<div class="text-monospace small text-muted mt-1">
by UPLOADER
</div>
<hr class="w-100 mt-2">
<!-- WARNINGS -->
<!--
> [alert-danger] for explicit content
> [alert-warning] for moderate content
> [alert-success] for no warnnings but if there's anything you want "tagged" anyways, use this!
-->
<div class="d-flex flex-row m-n1 font-italic" style="flex-wrap:wrap; line-height:16px">
<div class="flex-grow-2 m-1">
<div class="alert alert-danger p-1 px-2 small font-weight-bold text-center rounded-0 w-100 mb-0">
warnings
</div>
</div>
<div class="flex-grow-2 m-1">
<div class="alert alert-warning p-1 px-2 small font-weight-bold text-center rounded-0 w-100 mb-0">
or something more mild
</div>
</div>
<div class="flex-grow-2 m-1">
<div class="alert alert-success p-1 px-2 small font-weight-bold text-center rounded-0 w-100 mb-0">
or no warnings applicable
</div>
</div>
<!-- add more above this line! -->
</div>
<hr class="w-100 mb-2">
<!-- SUMMARY -->
<div class="text-justify">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis sollicitudin elit sed tellus blandit viverra sed eget odio. Donec accumsan tempor lacus, et venenatis elit feugiat non.</p>
<p>Duis porta eros et velit blandit dapibus. Curabitur ac finibus eros. Duis placerat velit vitae massa sodales, eget mattis nibh pellentesque.</p>
</div>
</div>
</div>
</div>
</div>
<!-- add more above this line! -->
</div>
</div>
</div>
<!-------------------------------------------------
MY CREDITS
------------------------------------------------->
<div class="mt-2 d-flex flex-row align-items-center">
<hr class="flex-fill my-0">
<a href="https://toyhou.se/22197298." class="tooltipster faded mx-3" title="code by jiko">
<i class="fa-regular fa-code fa-xs"></i>
</a>
<hr class="flex-fill my-0">
</div>
</div>
<!-- CODE ENDS -->