youtube 2008-ish ? layout

Tags: youtube, retro, old web, y2k, weird

Description:

GUYS!!! october 16 2024 UPDATED added mobile version (Looks best in WEB Mobile NOT THE APP (i dont like the app its not layout friendly go away app) ) Thank you for your attention

I Love old youtube!!!!

the main thing about this layout is it's customization!! ^_^ make sure you check the code (yeah, it's long cause it changes almost Everything) and place your custom images!!

you can place a custom gif on the video preview, and custom thumbnails on the interests section :3

again, the code is LONG so it's minified, compressed as much as i could. place it at the far bottom of your about me box!!

credit not needed do whatever u want if you wanna edit it go ahead if you can, if you want to reupload it and passing it as your own creation go ahead have fun

Preview:

click on the image for a larger preview

Code:

<!-- (c) Layout created by daniel (https://layouts.spacehey.com/layout?id=82102) -->

<style>
/* customization */
:root {
    /* the video displayed: (feel free to put a still image, but gifs would look even cooler!) */
    --video: url(https://images2.imgbox.com/e5/50/59sFPBPh_o.png);
    
    /* thumbnails for the interest sections! still images work better (they're intended to be thumbnails!) */
    --generalpic: url(https://images2.imgbox.com/24/6e/yngqs0eR_o.png);
    --musicpic: url(https://images2.imgbox.com/24/6e/yngqs0eR_o.png);
    --moviespic: url(https://images2.imgbox.com/24/6e/yngqs0eR_o.png);
    --tvpic: url(https://images2.imgbox.com/24/6e/yngqs0eR_o.png);
    --bookspic: url(https://images2.imgbox.com/24/6e/yngqs0eR_o.png);
    --heroespic: url(https://images2.imgbox.com/24/6e/yngqs0eR_o.png);
}
/* minified code */
.f-col a,.links{text-align:center}.center:after,.details-table td:last-child p{font-size:11px}.comments-table a p,.details p,.person p{white-space:nowrap;text-overflow:ellipsis}:root{--lightgray:#efefef;--darkgray:#767676}body{font-family:Arial,sans-serif;background:#fff}.container{width:875px}.top{background:#fff!important;color:#aaa;font-size:16px;height:88px}.logout-btn,.top a{color:#00f!important;text-decoration:underline!important;font-size:12px}#comments .inner>p b,.links li:not(:first-child) a,.mood>:last-child b:first-child,.section h4,label{font-size:0px}.logout-btn{font-weight:700}.top .right{position:absolute;right:0;top:13px}.logo{content:url(https://images2.imgbox.com/63/81/jOssloCc_o.png);height:63px!important;width:123px!important;margin-left:-10px!important;margin-top:3px!important}.links{border-radius:6px;padding:4px!important;background:linear-gradient(#d5d5d5,#e5e6e5);height:37px;transform:translate(0,-2px)}.contact,.general-about{transform:translate(10px,0)}.links li:is(:nth-child(4),:nth-child(6),:nth-child(7),:nth-child(8),:nth-child(9),:nth-child(10),:nth-child(11),:nth-child(12),:nth-child(13)){display:none}#comments .heading,.blog-preview h4,.blog-preview p,.blurbs .heading,.comments-table .pfp-fallback,.edit-link,.f-col .icon,.friends:not(#comments) .inner>p b,.links li:not(:last-child):after,.profile-info,.report,.table-section+.table-section,.verified{display:none}.links li:nth-child(2) a:after{content:"Videos";font-size:14px}.links li:nth-child(3) a:after{content:"Channels";font-size:14px}.links li:nth-child(5) a:after{content:"Community";font-size:14px}.links li:nth-child(14) a:after{content:"Upload";font-size:12px}.links li{display:block;width:124px;background:linear-gradient(#fbfcff,#b1c2e6);height:28px;padding:5px;transform:translate(1px,-32px);border-radius:5px 5px 0 0;border:1px solid #c3d0ec;border-bottom:0;margin-right:2px}.links li:nth-child(2){background:linear-gradient(#fcfcfc,#d5d5d5)}.links li:nth-child(2) a{color:#333}.links li a{color:#039;text-shadow:none;font-weight:700;font-size:14px}.links li a:hover{text-decoration:none;color:#039!important}.links li:nth-child(2) a:hover{text-decoration:none;color:#333!important}.links li:nth-child(14):hover{background:linear-gradient(#fff,#fed925)}.links li:nth-child(14){position:absolute;top:38px;right:5px;background:linear-gradient(#fff9c1,#fed925);color:#00f;height:25px;width:65px;padding-top:6px;border:1px solid #ecc101;border-radius:4px}.links li:nth-child(14) a{color:#994800}.links li:nth-child(14) a:hover{color:#994800!important;text-decoration:underline}.center{position:absolute;top:5.95rem;left:14.05rem;z-index:55}#q{width:213px;height:23px;border:1px solid #999}:focus{outline:0}label{position:absolute;left:13.75rem;bottom:2px;height:20px;width:78px;border:1px solid var(--darkgray);border-radius:3px;background:url(https://images2.imgbox.com/75/34/5WBmRRky_o.png) right/contain no-repeat #fff;text-align:left;padding:2px 4px}label:after{content:"Videos";font-size:13px;color:#000}.center:after,.profile h1{color:#03c;cursor:pointer}.general-about:hover:after,label:hover{border:1px solid #4f4f4f}.center button{position:relative;left:84px;border:1px solid var(--darkgray);border-radius:3px;padding:2.5px 7px;background:var(--lightgray);font-size:13px}.center button:hover{background:#e5e5e5;border:1px solid #4f4f4f}.center:after{content:"advanced";display:block;position:absolute;left:23rem;top:1px;border-bottom:1px dotted #03c;height:13px}main{direction:rtl}.col.right:before,.comments-table,.contact,.f-col,.friends-grid,.heading,.section,.table-section,h1,h4,p{direction:ltr}.col.left{width:29.6em}@keyframes flash{0%,49%{opacity:1}100%,50%{opacity:0}}.active .icon{animation:.2s 5 flash;position:absolute;top:2.2rem;right:17.2rem;content:url(https://www.freeiconspng.com/thumbs/warning-icon-png/status-warning-icon-png-29.png)}.profile h1{position:relative;left:6.7em;top:2.55em;font-size:12px;z-index:50;height:0}.details-table td:first-child p:hover,.profile h1:hover{text-decoration:underline}.profile h1:before{content:"From:";margin-right:5px;display:inline-block;color:#999;font-weight:400;cursor:default;pointer-events:none}.comments-table button:hover,.profile h1:hover:before{text-decoration:none}.mood{z-index:22;line-height:10px;width:%!important;position:relative;bottom:13.75em;left:6.3em;pointer-events:none}.mood b{font-weight:400!important;color:#999;font-size:12px}.mood>:last-child b:first-child:before{content:"View my: ";font-size:12px}.mood b a{font-weight:700!important;color:#000;font-size:12px;text-transform:lowercase;pointer-events:all}.mood b a:not(:last-child):after{content:", "}.general-about{background:#eee;border:1px solid #ccc;border-radius:1px;color:#000;padding:8px;margin-top:22px;width:360px;max-height:205px}.pfp-fallback,.profile-pic{width:52px!important;height:52px!important}.pfp-fallback{border:3px double #999;background-color:#fff;border-radius:1px}.details{height:170px}.details:before{display:block;content:"";width:100%;height:60px;border-bottom:1px solid #ccc}.details p:first-child{margin-top:10px}.details p{max-width:100%;overflow:hidden}.details p:last-child{font-size:10px;color:#000}.online img{filter:brightness(0%);animation:none;padding-left:10px}.ago{font-size:10px;padding-bottom:10px}.general-about:after{display:block;content:'<object width="425" height="344"><param name="movie" value="https://';direction:ltr;width:101%;height:18px;line-height:18px;font-size:10px;transform:translate(4px,0);border:1px solid #767676;border-radius:2px;color:#000;background:#fff;cursor:text}.details p:last-child:after{content:"Embed:";display:block;color:#999;font-weight:400;width:95%;border-top:1px solid #ccc;margin-bottom:3px;padding-top:3px;height:40px;position:absolute;bottom:0;font-size:12px}.contact{width:100%!important;height:0;border:0!important}.contact .heading:hover:before,.table-section:not(.table-section + .table-section) .heading h4:hover:before{color:#666}.contact .heading:before{content:"More From:";display:block;background:#fff;color:#000;font-weight:700;position:relative;width:fit-content;bottom:-20px;margin-top:-50px;left:16px;height:20px}.contact .heading{background:url(https://images2.imgbox.com/53/6e/DWCu1H09_o.png) -2px 21px no-repeat!important;color:#000!important;padding:0!important;font-size:16px;border:0!important}.contact .heading:hover{cursor:pointer;color:#666!important}.contact .heading h4{text-indent:20px}.contact .inner{border:1px solid #ccc;margin-top:5px}.f-row:first-child .f-col:is(:first-child,:last-child){height:0;width:0}.f-row:first-child{position:absolute;z-index:-1}.f-col{display:inline-block;margin:0 0 0 40px}.f-col a{width:100px;display:block}.contact .inner .f-row:first-child .f-col:first-child a{position:relative;bottom:14rem;left:14.9rem;background:linear-gradient(#fff9c1,#fed925);height:35px;width:4rem;padding:4.5px 5px;border:1px solid #ecc101;border-radius:4px;color:#994800;z-index:9999}.table-section,.url-info{border:0!important}.contact .inner .f-row:first-child .f-col:last-child a{position:relative;top:13.7rem;right:31rem;color:transparent;height:35px;width:9rem}.contact .inner .f-row:first-child .f-col:first-child a:hover{color:#994800!important;text-decoration:underline;background:linear-gradient(#fff,#fed925)}.url-info{height:0;padding:0!important;font-size:0px;margin:0!important}.url-info:after{content:"Customize";color:#03c;cursor:pointer;position:absolute;top:20.2rem;font-size:12px;border-bottom:1px dotted #03c}.table-section:not(.table-section + .table-section) .heading{background:url(https://images2.imgbox.com/53/6e/DWCu1H09_o.png) 5px 2px no-repeat!important;color:#000!important;padding:0!important;font-size:16px;border:0!important;margin-bottom:5px}.table-section:not(.table-section + .table-section) .heading h4{text-indent:25px;font-size:0px;width:100%}.table-section:not(.table-section + .table-section) .heading h4:before{content:"Related Videos";font-size:16px;cursor:pointer}.table-section:not(.table-section + .table-section) .heading h4:after{content:"";cursor:pointer;font-size:16px;float:right;width:48px;height:20px;background-image:url(https://images2.imgbox.com/a9/9d/5IyRWzE2_o.png)}.details-table{border:1px solid #ccc;margin-bottom:200px}.details-table tr{display:flex;flex-direction:row;border-bottom:1px dotted #ccc}.details-table td:first-child{flex:0.35;background:#fff!important;text-align:center;outline:#999999 double 3px;height:60px;color:gray!important;border-radius:0;margin:5px;position:relative;cursor:pointer}.details-table td:first-child:hover:before{display:block;content:"";height:15px;width:15px;position:absolute;bottom:0;left:0;background-image:url(https://images2.imgbox.com/ee/53/PC3xkXmJ_o.png)}.details-table td:first-child:before{display:block;content:"";height:15px;width:15px;position:absolute;bottom:0;left:0;background-image:url(https://images2.imgbox.com/96/67/PwH8r3uv_o.png)}.details-table td:first-child p{text-align:left;transform:translate(95px,-5px);color:#03c}.details-table td:last-child{flex:1;overflow-y:scroll;height:52px;margin-bottom:2px;align-self:flex-end;color:#000;background:#fff!important}#comments .inner>p a,#comments a:hover,.comment-reply a,.comments-table a p,.comments-table td:first-child,.person p,footer .links a{color:#03c!important}.details-table td:last-child::-webkit-scrollbar{width:2px}.details-table td:last-child::-webkit-scrollbar-thumb{background:#ccc}.details-table tr td:first-child{background-size:cover!important}.details-table tr:first-child td:first-child{background-image:var(--generalpic)!important}.details-table tr:nth-child(2) td:first-child{background-image:var(--musicpic)!important}.details-table tr:nth-child(3) td:first-child{background-image:var(--moviespic)!important}.details-table tr:nth-child(4) td:first-child{background-image:var(--tvpic)!important}.details-table tr:nth-child(5) td:first-child{background-image:var(--bookspic)!important}.details-table tr:nth-child(6) td:first-child{background-image:var(--heroespic)!important}.col.right{display:flex;flex-direction:column;margin-left:-10px}.blog-preview{order:2}.blurbs{order:3;padding:0!important}.friends#comments{order:4}.friends:not(#comments){order:1;position:relative;top:51rem;left:23.8rem;width:360px;height:0}.friends:not(#comments) .heading{background:0 0!important;color:#000!important;padding:0!important;font-size:16px;margin-bottom:5px}.friends:not(#comments) .heading h4{font-size:0px;width:100%}.friends:not(#comments) .heading h4:before{content:"Promoted Videos";font-size:16px;cursor:text}.friends:not(#comments) .inner{border:1px solid #ccc}.person .pfp-fallback{width:75px!important;height:45px!important;object-fit:cover;object-position:0px -5px}.person:first-child p:after,.person:nth-child(2) p:after,.person:nth-child(3) p:after,.person:nth-child(4) p:after{width:100%;font-size:12px;text-decoration:none;cursor:text;height:12px;color:#000;display:block;overflow:hidden;font-weight:400}.person p{display:inline-block;padding:2px;text-align:left!important;font-size:11px!important;max-width:100%!important;overflow:hidden}.person:first-child p:after{content:"01:30"}.person:nth-child(2) p:after{content:"04:55"}.person:nth-child(3) p:after{content:"11:28"}.person:nth-child(4) p:after{content:"04:20"}.person :is(p,a):hover{text-decoration:underline;text-decoration-color:#0033cc!important}.friends:not(#comments) .person{display:inline-flex;flex-direction:column-reverse;width:80px;margin-bottom:100px}.friends:not(#comments) .person:before{content:"Recently Befriended";display:block;margin-top:-12px;font-size:11px;color:#00f}.friends:not(#comments) .person:hover:before{text-decoration:underline;cursor:pointer}.friends-grid{height:110px;overflow:hidden}.more{position:relative;bottom:20px;color:#ccc!important}.col.right:before{content:"About me!";font-size:18px;font-weight:700;line-height:11px}.blog-preview{margin-top:15px;height:350px;border:1px inset #d3d3d3;z-index:55;background-image:var(--video);background-size:contain;background-repeat:no-repeat;background-color:#000;background-position:center center;position:relative;margin-bottom:28px}#comments,.comment-reply,.section{border:1px solid #ccc}.blog-preview:after{display:block;content:"";width:100.5%;background-image:url(https://images2.imgbox.com/c9/63/APUxQgrT_o.png);background-size:contain;height:45px;background-repeat:no-repeat;cursor:pointer;position:absolute;bottom:-50px}#comments .inner>p:after,.blurbs:before{width:100%;background-repeat:no-repeat;content:""}.blurbs:before{display:block;height:135px;background-size:100% 100%;background-position:top center;image-rendering:pixelated;background-image:url(https://images2.imgbox.com/03/5b/6IXfNA0e_o.png)}.section{padding:10px;width:102.7%;transform:translate(6px,0);height:280px;overflow-y:scroll}.section::-webkit-scrollbar{width:2px}.section::-webkit-scrollbar-thumb{background:#ccc}.section:first-child h4:after{content:"Description:";font-size:12px;color:#000}.section:last-child h4:after{content:"Looking for:";font-size:12px;color:#000}.blurbs:after{content:"";display:block;background-image:url(https://images2.imgbox.com/cb/03/aIsMBKzG_o.png);height:65px;background-size:100% 100%;image-rendering:pixelated;cursor:pointer}#comments{border-top:none;margin-top:-20px}.comments-table tr{display:flex;flex-direction:column}.comments-table td{flex:1;width:100%!important;background:0 0!important}.comments-table td:first-child{padding:0 0 5px!important;text-align:left;font-size:12px;background-image:url(https://images2.imgbox.com/03/e5/jHG9nxrp_o.png)!important;background-repeat:no-repeat!important;background-position:right!important}.comments-table a p{max-width:26.5%;overflow:hidden;text-indent:3px}#comments .ago:not(.comment-reply .ago){position:relative;bottom:30px;left:128px;font-size:12px;font-weight:400;color:#666;height:0;pointer-events:none}#comments .ago:not(.comment-reply .ago):before,#comments .count:not(.count + .count):before{content:"("}#comments .ago:not(.comment-reply .ago):after{content:")"}.comments-table td:last-child p:first-child{height:0!important;margin:-5px!important}#comments .inner>p a{font-size:12px;float:right}#comments .inner>p a:last-child:after{content:"";display:inline-block;margin-right:10px;color:#03c!important}#comments .inner>p b:hover{color:#666;cursor:pointer}#comments .inner>p:first-child:before{content:"Video Responses";display:block;font-size:12px;width:95.5%;text-align:left;margin-right:5px;padding-bottom:4px;margin-bottom:5px;padding-left:21px;font-weight:700;background:url(https://images2.imgbox.com/47/a0/8cfaKM4P_o.png)!important;background-position:0 -1px!important;background-repeat:no-repeat!important;border-bottom:1px solid #ccc}#comments:before{content:"(0)";display:block;height:0;position:relative;top:.35rem;right:21.05rem;font-size:12px;font-weight:700;color:#666}#comments .inner>p b:before{content:"Text Comments ";display:inline-block;font-size:12px;width:110px;text-align:right;margin-right:5px;background:url(https://images2.imgbox.com/53/6e/DWCu1H09_o.png)!important;background-position:2px -1px!important;background-repeat:no-repeat!important}#comments .inner>p:after{display:block;margin:10px 0 0 5px;padding-bottom:8px;background-image:url(https://images2.imgbox.com/a9/c5/7fCZLWgL_o.png);height:20px;border-bottom:1px solid #efefef}#comments .count+.count{color:#000!important;font-size:12px;position:relative;bottom:3.25rem;left:13.8rem;text-align:left;width:0;display:inline-block}#comments .count+.count:after,#comments .count+.count:before{content:""}#comments .count:not(.count + .count):after{content:") "}#comments .count:not(.count + .count){color:#666!important;font-size:12px;width:0;display:inline-block}.comments-table td:last-child{padding-bottom:0!important;border-bottom:1px solid #efefef!important}.comments-table tr:not(:first-child){margin-top:-15px;padding-top:20px}.comments-table button{display:block;font-size:11px;background:0 0;border:none;border-bottom:1px dotted #03c;width:fit-content;padding:0;color:#03c;cursor:pointer;position:relative;bottom:2.3rem;left:21.7rem}footer .links,footer li{background:0 0!important}.copyright,footer,footer .links{border-top:1px solid #ccc}.comment-reply:before{content:"Reply:";color:#666}.comment-reply{margin-top:-40px;position:relative}.comment-reply>p{padding:10px}.comment-reply .ago{font-size:10px!important;bottom:40px!important;left:220px!important}.comment-reply small{position:absolute;bottom:4px}footer{background:url(https://images2.imgbox.com/bb/8a/AAr1Z8Xq_o.png) 10px 15px no-repeat #eee!important;padding:0}footer .links{border-radius:0}footer .links a:after{content:""!important}footer .links a{font-size:11px!important;font-weight:400;text-decoration:underline}footer li{display:inline!important;border:0!important;width:fit-content!important;position:initial!important;border-radius:0!important}.copyright,.copyright a{color:#000!important;text-decoration:none!important;font-size:11px}.copyright{width:100%!important;background:#fff;height:40px;line-height:50px;margin:0!important}footer i{font-style:normal}.comment-reply:not(:first-child){margin-top:0px;}.comment-reply p {display:inline-block;width:100%;}
/* 2024 mobile version */
@media only screen and (max-width: 600px) {
    .links {
        margin-top:30px!important;
    }
    .links li {
        display:inline-block;
        width:85px;
        margin:0;
    }
    .center {
        left:-2.5rem;
        display:none!important;
    }
    .table-section {
        margin-top:120px!important;
    }
    .table-section .inner table {
        margin-bottom:0px;
    }
    .blurbs:before {
        background-size:contain;
        image-rendering: auto;
    }
    .friends:not(#comments) {
        position:relative;
        top:-180px;
        left:0;
        width:100%;
    }
    .col.left {
        width:100%;
    }
    .col.right {
        margin-top:160px;
        margin-left:0px;
    }
    .details-table td:first-child p {
    transform: translate(110px, -5px);
    }
    .general-about {
        width:100%;
        transform:none;
    }
    .url-info:after {
        text-indent: 5px
    }
    .friends-grid {
        padding-left:8.5%;
    }
    #comments:before {
        right:16rem;
    }
    .blurbs:after {
        background-size:contain;
        height:60px;
        background-repeat:no-repeat;
        image-rendering: auto;
    }
    #comments .count+.count {
        left:10.2rem;
        bottom:3.4rem;
    }
	.contact .inner {
        max-width:97.5%;
    }
}
</style>

Copy and paste this code into the "About me" section of your Profile to use it.

Caution: This Layout was not inspected by SpaceHey — use it at your own risk.

Comments

Displaying 20 of 72 comments ( View all | Add Comment )

MapleBee	1733967645 ussing Report Comment
DeadLamb	1733923606 uuusinngg Report Comment
#Rottinggodness༄	1733675898 Using Report Comment
alana .ᐟ	1733598943 using!! I love it smm Report Comment
fartgoblin2000	1733511082 using! love ur work Report Comment
dirk / finn ㅤ𓏵　 MEDKIT'S CANON HUSBAND.	1733308664 USING!!!!!!!!!!! Report Comment
Agoshi_Sunshine	1732036058 Using!! Report Comment
MALAH	1731670072 can you do a dark mode version? Report Comment
Asher13th!	1731547187 USINGG :D Report Comment
nishchay	1731527282 THANKYOU Report Comment
Eraaa ✭	1730379428 using! although idk how to place a gif as the video showing it only comes up as an image ( ≧Д≦) can someone help?? Report Comment go to tenor and copy the url of the gif you want, then go to code and paste it where it asks for the url and then add .gif at the end of it by nishchay; 1731524439; Report
Lust	1729283496 Using Report Comment
Cyb3r	1729039795 Usingg Report Comment
Meow	1728640199 USINGJBQBHFQHBBFEHUVQFUFY I LOVR THIS SM THANK YOU ANGEL Report Comment
BiggieCheeseFanfics.	1728535706 Using Report Comment
Wylan	1727671860 usingg :)) Report Comment
Ezra	1727483445 using! Report Comment
fifui / d5vvp	1727458838 Using! Report Comment
PsychoL0v3z	1726970540 using Report Comment
headfirstforhalozz	1726882293 OH MY GOD USING?? Report Comment