Video Player Layout

Tags: youtube, video player, video, banner, dark

Description:

This layout is inspired by 2006-2009 YouTube! You can update your new profile banner, add a featured video from your YouTube channel and more! This layout was created by studying other layouts, as I am new to coding and this was a way to learn! You'll see some of my own code in here, as well as code I wrote inspired by the following people: https://layouts.spacehey.com/twilight - For the Transparent abilities! https://spacehey.com/ikoe - For the video player help! If you use this layout, please comment below!

Preview:

click on the image for a larger preview

Code:

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

<iframe width="504" height="300" src="https://www.youtube.com/embed/H0d6tSqyN1Y" id="vPlayer" frameborder="0" allowfullscreen=""></iframe>
<style>

/*FEATURED VIDEO INSTRUCTIONS ^^^ - This is your featured video, to update this, go to YouTube, select the video you want and click "share", and then copy the last part of the video link, for example "H0d6tSqyN1Y". Then replace the existing url between / and " to get your video.*/

#vPlayer {
    position: absolute;
    top: 220px;
}
main .right { padding-top: 320px; }
</style>



<style>

/*PROFILE BANNER INSTRUCTIONS - This is your profile banner. To keep with the style if you're making a banner, the dimensions are included in the sample art. But your image should automatically crop into the correct size. To change your banner, where it says "background-image", you want to copy the image address of your desired image, and paste it after the ' in the brackets. Make sure there is a ' before and after your url.*/

main:before {
	width: 100%;
	height: 100px;
	display: block;
	content: "";
	background-image: url('https://media.discordapp.net/attachments/473079589367840778/1087843044432302200/RRR.png?width=1409&height=147');
	background-position: center center;
	background-size: cover;
}
@media only screen and (max-width: 600px) {
	main:before{
		height: 200px;
	}
}
</style>



<style>
/*PROFILE BODY - This is your main profile. Directly below you can change your profile background.*/

body{
  background-image:url(https://fujifilm-x.com/wp-content/uploads/2021/01/gfx100s_sample_04_thum-1.jpg);

background-attachment:fixed;background-size:cover; /* If you want your background to tile, remove this line */
  
  
}

:root {
    --logo-blue: rgba(65, 69, 144, 0.67); 

 /* ^ This line changes the color of the SpaceHey banner at the top. You can chose a solid color by using a HEX code, like "#FFFF00" as Yellow for example. But it also supports transparency like "rgba(65, 69, 144, 0.67);" as Transparent Blue for example, and to get codes for this, use https://www.hexcolortool.com/ */
    
    --light-orange: transparent;
    --dark-orange: black;
    font-size-adjust: .6; /* Updates font to be slightly bigger */
}

nav .links {
    background-color:rgba(0, 0, 0, 0); /* navbar transparency */
     text-align: center;

}

#q,
footer {
    background: 0 0; /* footer transparency */
    color: #fff;
}

footer {
    padding: 0; /* closer footer */
}

footer .links li:not(:last-child)::after,
nav .links li:not(:last-child)::after {
    color: #fff; /* This makes the bars between nav items white */
}

#q {
    border: 0;
    outline: 0;
    border-bottom: 1px solid #000; /* improved search bar */
}

button {
    border: none; /* improved search bar */
}

.comments-table td:first-child {
    width: 20%; 
/* Powered by Transparent Lite by Twilight Sparkle! https://spacehey.com/twilight */

}</style>


<style>
/* contact icons */
.contact .inner a img {
font-size: 0;
}

.contact .inner a img:before {
font-size: 1em;
display: block
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(1) a:before {
/* add to friends */
content: "➕"
}

.contact .inner .f-row:nth-child(1) .f-col:nth-child(2) a:before {
/* add to favorite */
content: "⭐"
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(1) a:before {
/* send a message */
content: "🗨️"
}

.contact .inner .f-row:nth-child(2) .f-col:nth-child(2) a:before {
/* foward to friend*/
content: "⏩"
}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(1) a:before {
/* instant message */
content: "💬"
}

.contact .inner .f-row:nth-child(3) .f-col:nth-child(2) a:before {
/* block user */
content: "🚫"
}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(1) a:before {
/* add to group  */
content: "👪"
}

.contact .inner .f-row:nth-child(4) .f-col:nth-child(2) a:before {
/* report */
content: "🟥"
}
</style>


<style>
/*This adds rounded corners to your profile*/
   .top{
        border-radius: 0px 0px 10px 10px !important;
        box-shadow: 0px 0px 0px #fff;
</style>


<style>
/*This changes the background of your main profile*/

main {
  background-image:url(https://media.discordapp.net/attachments/473079589367840778/1072846808759423036/wewewe.png?width=905&height=1097);
  color: #ccc;
</style>


<style>
.friends .heading{ font-size:0; }
.friends .heading:before{ content: "Friends!"; font-size:.8rem; font-weight:bold; 
color:white; }
}
</style>
<style>
.friends#comments .heading{ font-size:0; }
.friends#comments .heading:before{ content: "Comments!"; font-size:.8rem; font-weight:bold;
color:white; } 
</style>

<style>
:root {

--darker-blue:url(https://media.discordapp.net/attachments/473079589367840778/1073040214638989383/weewew.png?width=396&height=662);
--lighter-blue:transparent;
--even-lighter-blue:url(https://media.discordapp.net/attachments/473079589367840778/1073040173849395310/wewe.png?width=396&height=662);
--lightest-blue:url(https://media.discordapp.net/attachments/473079589367840778/1073040173849395310/wewe.png?width=396&height=662);
--dark-orange:#bc724a;
--light-orange:url(https://media.discordapp.net/attachments/473079589367840778/1073040214638989383/weewew.png?width=396&height=662);
--even-lighter-orange:black:url(https://media.discordapp.net/attachments/473079589367840778/1073040173849395310/wewe.png?width=396&height=662);
--green:black:url(https://media.discordapp.net/attachments/473079589367840778/1073040173849395310/wewe.png?width=396&height=662);
}
</style>


<style>
.profile-pic img,.friends-grid img,.comments-table img{border-radius:5px;}
</style>

<style>
*{
  border-radius: 4px;
}
.profile .contact .heading, .profile .table-section .heading, .home-actions .heading{
  border-radius: 6px 6px 9px 9px;
}
</style>

<style>


.container {
width: 90%;
max-width: 900px;
}

</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.