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

Eryn	1743531351 using this! tyyy Report Comment
MetalheadMenezes^^!	1743368198 using! Report Comment
garbagepuppiez!	1742773648 using!! q(≧▽≦q) Report Comment
bats n cats	1742285890 using! tysm xx Report Comment
Testing, Testing 123!	1742273716 thank uuu using Report Comment
Testing, Testing 123!	1742273713 thank uuu using Report Comment
s0ggywaffl3z	1740354126 using! Report Comment
tory :3	1740256917 usingg Report Comment
redacted	1739867056 using! Report Comment
T	1739705884 Using Report Comment
starlily	1738439900 using! Report Comment
arielle☆	1738371407 using! (almost forgot to comment) Report Comment
𝒮	1738331164 :D Report Comment
liz..	1737081968 using thisss tyyy <3 Report Comment
angelbeat09	1736713931 using this!! this is so cool! Report Comment
vino	1736556867 using! this is so cute :o Report Comment
s0fu1a	1736461637 hi im using it and i have a question, i want my links to show on my profile, how do i do that? x( Report Comment its only images or gifs :( by BICO ON DA MYSPACE CRACK; 1736542939; Report
kittystarship !!	1736118530 Using!! TYSMM ^^ Report Comment
seychellia	1735866191 using!! Report Comment