My YouTube Video Sizing ( Updated 28/11/14 )

I think I have posted this in the correct place so here goes. I am not one who likes big borders from YouTube around videos especially when in the phone size view, that one in particular leaves massive borders above and below the video. So I had a little tinker with these by adding some css into the profiles.
I have only tried this for YouTube so far but looks much better. If you resize the browser you should see the changes. Oh I also changed my profile image size as it was to large for me.

Here is a link to my video page
http://1940snetwork.com/founder/youtube

Here is the css I used, this is my first play around with changing any Jamroom items and would be better to probably add some classes to make it easier to target which I will do at some point.

/* Johns YouTube Code For Profiles */
@media only screen and ( max-width:300px){
iframe#ytplayer{width:auto!important;height:auto!important;display:flex;margin:auto}}

@media only screen and ( min-width:300px ) and (max-width:481px){
iframe#ytplayer{width:100%!important;height:198px!important;display:flex;margin:auto}}

@media only screen and ( min-width:481px ) and (max-width:587px){
iframe#ytplayer{width:440px!important;height:249px!important;display:flex;margin:10px auto; }}

@media only screen and ( min-width:587px ) and (max-width:767px ){
iframe#ytplayer{width:560px!important;height:315px!important;display:flex;margin:10px auto; }}

@media only screen and ( min-width:767px ) and ( max-width:941px){
iframe#ytplayer{width:520px!important;height:293px!important;display:flex;margin:10px auto; }}

@media only screen and ( min-width:941px ) and ( max-width:1155px){
iframe#ytplayer{width:640px!important;height:360px!important;display:flex;margin:10px auto; }}

@media only screen and ( min-width:1155px){
iframe#ytplayer{ width:740px!important;height:416px!important;display:flex;margin:10px auto; }}

@media only screen and ( min-width:481px ){
iframe#ytplayer{ margin:10px auto;box-shadow:2px 2px 7px rgba(0,0,0,0.9);padding:4px;border:2px solid }}

This is on the slateskin by the way with no other adjustments to it's standard padding etc.

** This was updated because some other elements like the comments entry was also iframed so added the #ytplayer after iframe so it will only target the YouTube player and leave the other iframed items alone ***
updated by @john-bizley: 01/03/15 03:37:56PM

Thanks for sharing this John - that's awesome - I'm sure other users will find this handy!

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

No worries Brian, gald you liked it and hope others will find it useful. Was not sure whether this was the right place to add it as the title for the forum was for questions.
Do you think it would be better for me to add tips in a blog on my page or as a suggestion we had a forum section in Ning for posting tips so maybe another category could be added for adding tips, just a thought. Finding my way slowly but surely around Jamroom and sites coming nicely although a way to go yet

This forum (the design and customization forum) is perfect for this

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

The slate skin is still in (beta) but I wouldn't expect it to become much prettier. Design is something I'm just not good at, so if you want to help me pretty it up, all design input welcomed

Otherwise once I get it working properly, I'll have to ask doug for a hand.

Site Builder and the Slate skin suggestions taken here:
https://www.jamroom.net/site-builder/forum

Given Slate is meant to be the basic theme with support for the site builder and expected to be cloned and designs built of it, I think it looks fine. Will depend on what widgets it ships with as examples more than the overall design in my eyes.

** This was updated because some other elements like the comments entry was also iframed so added the #ytplayer after iframe so it will only target the YouTube player and leave the other iframed items alone ***