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 116 comments ( View all | Add Comment )

sam	1752668553 i cant figure out how to add my photos/gifs. ive tried using imgbb and imgur but the links just display a black screen, could you help me out? Report Comment
Krell	1752471277 Is it possible to only use the "related videos" part to put the image thumbnails in the "interests" section? if so how can I do it? thank you Report Comment
ִ ✙　⦂ 　　dude	1752440188 USING Report Comment
toby/cass 🐾	1752435606 usingg :3 Report Comment
vivica ✿	1752020087 using :] Report Comment
chineburlai	1751892108 this is so cool what the hell Report Comment
⚞•⚟	1751610465 USING Report Comment
Pluto	1751404276 USING Report Comment
horns	1751400590 using because cool Report Comment
SXSHARSACOFAOM	1751392921 usinf Report Comment
poe mccartney ✮⋆˙	1750812709 using! if i may ask, is there any simple way to collapse the comments into a small scroll box like all the other sections? it looks a bit clunky having the right hand side go so far down Report Comment
AshaOuiOui	1750414407 im having too much trouble with this :( Report Comment
ℳᥲɾtเꫀ	1749551612 Using this is so cool Report Comment
klavier	1748635210 usingg :) Report Comment
dannywoahh	1748485382 Using! Report Comment
` ㅡ riko * finn	1748358866 using! Report Comment
++ann--	1748048743 Using in the future fa sure Report Comment
SPIT	1748026815 how can i add a photo for the background instead of having it white? also, how can i make gifs/photos go over the layout, not inside the "about me" or "who id like to meet" areas? Report Comment
zuzu	1747673315 this is the ebst layout ive ever seen holy shit Report Comment
CAS	1747269802 usingg tyyy Report Comment