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

starein2thevoid	1773314730 youre mr spacehey Report Comment
polynomial22	1772499027 using!!! also amazing talking heads reference Report Comment
XERN0US	1772391129 using Report Comment
0LLI3xx	1772195707 usin Report Comment
aa	1771700887 USING!! Report Comment
rina	1769909039 usando :3 Report Comment
krapulito	1769751808 Usingg ! Report Comment
1DOLLAR	1769705564 usando Report Comment
Stupidboy	1769191069 using :3 :D Report Comment
𝓕𝓻𝓮𝓪𝓴𝔂ASAHI/ASH!!! ☆彡 #1 Tsukasa Fan (trust)	1766318194 using!!!!! Report Comment
nana	1763272606 usingg! Report Comment
ninisnotonfire	1762666227 using !!! Report Comment
FairyPotato	1762638773 using!!! Report Comment
All FLesh Rots	1760929142 using! Report Comment
OwlLipgloss	1760157025 Using. Report Comment
irlfa1ry	1755468377 using!! Report Comment
englisch ist mein lieblingsfach	1755169260 using :p Report Comment
͙͘͡★ kylie͡ ͙͘͡★	1755011799 usinnngng! Report Comment
kaz	1753999103 Maybe using? Report Comment
Zeta	1753708363 this is literally perfect Report Comment