Make YouTube video smaller

[momo-ai13]

I know there used to be a way it so the youtube video was only a play/pause button on your profile. Is that still a thing?
Also I'd like to know the coding to just make it smaller in general.

[AlthIndor]

It is! All the old codes you might have had for media will still work, but the selector is now .media_panel iframe as opposed to .media_panel object, so if you have media code on your profile that is all you need to update.

To make it a button, you could do something like this (positioning code not included):

.media_panel {
background: url('https://i.imgur.com/MWTKBXK.gif') center no-repeat;
width: 20px;
height: 20px !important;
padding: 0;
overflow: hidden;
}

.media_panel iframe {
width: 200px;
height: 200px;
position: absolute;
bottom: 0;
left: 0;
opacity: .001;
}

To change the size otherwise, you need very little code, just this much:

.media_panel iframe {
width: 200px;
height: 200px;
}

To whatever values you like.

[momo-ai13]

AlthIndor

It is! All the old codes you might have had for media will still work, but the selector is now .media_panel iframe as opposed to .media_panel object, so if you have media code on your profile that is all you need to update.

To make it a button, you could do something like this (positioning code not included):

.media_panel {
background: url('https://i.imgur.com/MWTKBXK.gif') center no-repeat;
width: 20px;
height: 20px !important;
padding: 0;
overflow: hidden;
}

.media_panel iframe {
width: 200px;
height: 200px;
position: absolute;
bottom: 0;
left: 0;
opacity: .001;
}

To change the size otherwise, you need very little code, just this much:

.media_panel iframe {
width: 200px;
height: 200px;
}

To whatever values you like.

I wrote the coding for my profile maybe 5-10 years ago and I don't understand it anymore lol.

I have something like this right now:

.media_panelul.buttons {
top:-20px;}
.media_panel h2 {display:none;}

.media_panel object object {
position:absolute;
left:0px;
bottom:0px;
min-height:350px;
min-width:100%;
display:block;
mix-blend-mode:lighten;
-webkit-filter:sepia(1) contrast(1.4) brightness(3) hue-rotate(210deg);
filter:sepia(1) contrast(1.4) brightness(3) hue-rotate(210deg);
}

.media_panel h2 ~ object {
display:block;
position:absolute;
left:0px;
bottom:0px;
overflow:hidden;
height:350px;
max-height:24px;
min-width:100%;
transition:mix-blend-mode 0s !important, max-height 0.5s, filter 0.5s;
}

[AlthIndor]

momo-ai13

I have something like this right now

Most of that definitely isn't needed anymore! It looks like the code you have now relied on the old version of the YouTube player, which allowed you to make the player controls always visible, and turned it into a mini-player with just the controls visible on the layout. Unfortunately YT removed that feature. u.u;;

How would you like your media to styled / positioned now? We can write you some updated code for it!

[momo-ai13]

AlthIndor

momo-ai13

I have something like this right now

Most of that definitely isn't needed anymore! It looks like the code you have now relied on the old version of the YouTube player, which allowed you to make the player controls always visible, and turned it into a mini-player with just the controls visible on the layout. Unfortunately YT removed that feature. u.u;;

How would you like your media to styled / positioned now? We can write you some updated code for it!

Omg thank you, this is of kind of you! I just want a small player that will fit about the same width as the thinnest column on my profile if that makes sense.

[AlthIndor]

momo-ai13

Omg thank you, this is of kind of you! I just want a small player that will fit about the same width as the thinnest column on my profile if that makes sense.

Yup, makes sense! Would something like this work for you, or is this too much? rofl
Also I don't even know if it works in Chrome I'm sorry if you use Chrome, you're my guinea pig.

Edit: Put on Pastebin since I don't trust Gaia to not ruin it: https://pastebin.com/RVvMuBy0

[momo-ai13]

AlthIndor

momo-ai13

Omg thank you, this is of kind of you! I just want a small player that will fit about the same width as the thinnest column on my profile if that makes sense.

Yup, makes sense! Would something like this work for you, or is this too much? rofl
Also I don't even know if it works in Chrome I'm sorry if you use Chrome, you're my guinea pig.

Edit: Put on Pastebin since I don't trust Gaia to not ruin it: https://pastebin.com/RVvMuBy0

Woah that's a lot of code! lol
Hmm.. I'd like the volume/mute button to be present and if possible I still want them to be able to click it and be taken to the youtube video.

[AlthIndor]

momo-ai13

Woah that's a lot of code! lol
Hmm.. I'd like the volume/mute button to be present and if possible I still want them to be able to click it and be taken to the youtube video.

I wanted to do a fancy thing! Never done one with scrolling title so that was a good excuse to do it. whee

Oh, okay! I don't have any images for those interface elements right now, so I won't get to it tonight. Since with the current version of the player, the controls auto-hide and you can't change that, the interface needs to be supplied as a separate image overlay, assuming you want it always visible.

[momo-ai13]

AlthIndor

momo-ai13

Woah that's a lot of code! lol
Hmm.. I'd like the volume/mute button to be present and if possible I still want them to be able to click it and be taken to the youtube video.

I wanted to do a fancy thing! Never done one with scrolling title so that was a good excuse to do it. whee

Oh, okay! I don't have any images for those interface elements right now, so I won't get to it tonight. Since with the current version of the player, the controls auto-hide and you can't change that, the interface needs to be supplied as a separate image overlay, assuming you want it always visible.

It looks amazing! I just couldn't hear it because for some reason the music was muted and I had no option to unmute it lol

[AlthIndor]

momo-ai13

It looks amazing! I just couldn't hear it because for some reason the music was muted and I had no option to unmute it lol

I'm pretty sure that broke literally last night, because that's the first time I saw it and the first threads about it started popping up.

[momo-ai13]

AlthIndor

momo-ai13

It looks amazing! I just couldn't hear it because for some reason the music was muted and I had no option to unmute it lol

I'm pretty sure that broke literally last night, because that's the first time I saw it and the first threads about it started popping up.

Ah okay. Seems like everything around here is always breaking lol

[AlthIndor]

Try this. ^^

.media_panel {
background: url('https://i.imgur.com/gqTTTvw.png') no-repeat, url('https://i.imgur.com/gqTTTvw.png') no-repeat #00000080;
background-position: bottom -45px left -22px, bottom -5px right -50px;
height: 28px !important;
padding: 0;
border: 1px solid #FFFFFF40;
box-sizing: border-box;
overflow: hidden;
}

.media_panel h2, .media_panel iframe {
position: absolute;
bottom: 0;
}

.media_panel iframe {
width: 300px;
height: 200px;
left: -22px;
opacity: .01;
z-index: 1;
}

.media_panel h2 {
display: block;
width: calc(100% - 185px);
height: 100%;
margin: 0;
left: 78px;
z-index: 2;
}

[momo-ai13]

AlthIndor

Try this. ^^

.media_panel {
background: url('https://i.imgur.com/gqTTTvw.png') no-repeat, url('https://i.imgur.com/gqTTTvw.png') no-repeat #00000080;
background-position: bottom -45px left -22px, bottom -5px right -50px;
height: 28px !important;
padding: 0;
border: 1px solid #FFFFFF40;
box-sizing: border-box;
overflow: hidden;
}

.media_panel h2, .media_panel iframe {
position: absolute;
bottom: 0;
}

.media_panel iframe {
width: 300px;
height: 200px;
left: -22px;
opacity: .01;
z-index: 1;
}

.media_panel h2 {
display: block;
width: calc(100% - 185px);
height: 100%;
margin: 0;
left: 78px;
z-index: 2;
}

Thanks! The scrolling text was really cool though smile

[AlthIndor]

momo-ai13

Thanks! The scrolling text was really cool though smile

Hmm, actually should be super easy to combine them....
Yeah! If you want both, delete the .media_panel h2 rule you have, and replace it with:

@keyframes TitleScroll {
from {transform: translateX(0);}
to {transform: translateX(-50%);}
}

.media_panel h2 {
display: block;
width: calc(100% - 160px);
height: 100%;
font: 400 19px/37px 'Roboto Condensed', sans-serif;
margin: 0;
left: 75px;
overflow: hidden;
z-index: 2;
}

.media_panel h2::after {
content: 'Clean Bandit and Marina - Disconnect • Clean Bandit and Marina - Disconnect •';
display: inline-block;
width: max-content;
animation: TitleScroll 10s linear infinite;
}