youtube 2008-ish ? layout

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

Description:

more layouts!

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 idioteque (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:64.8%}.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%;}
</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 40 comments ( View all | Add Comment )

SquiddleCuller	1714768817 USINGGG Report Comment
Rev	1713250290 Using Report Comment
︶　　e.　Niko ✦ Kuuㅤㅤֺㅤㅤ໑	1712431061 uusinn Report Comment
gooptrials	1712110273 using! Report Comment
vkthdrl4	1711746503 Us1nggg Report Comment
SAWZKY!1!	1711664154 so c00l, using Report Comment
@🍀ZombieBug🍔🐞	1710700192 Ill try it, this is awesome!! Report Comment
nookie	1709945288 using awesome sauce Report Comment
shoot me	1709097889 love this a lot:) i wonder, can you edit the description part at all? please let me know Report Comment
eugeniiiiiiiia	1706162014 usingggg........... heh Report Comment
౨ৎ ┈ ｡ﾟ toki 🍭	1703822817 using!! Report Comment
Sillypilled	1702476008 TALKING HEADS SPOTTED RRAHHHHHHHH 🦅🦅🦅🦅‼️‼️‼️ Report Comment
Дед	1702265493 using!!!!! Report Comment
☆Sal!!(auto music)☆🍉	1702238726 using! Report Comment
liam / ethan	1702175422 using! Report Comment
un❕k⨂rn	1702168033 Using! Report Comment
e	1701213947 the code doesnt work i begging someone to help Report Comment
e	1701211179 can someone help me find a way to put a video where the image or gif is HELPPPPP Report Comment