My Video Sizing For YouTube Videos In The URL Scanner

If you have the url scnner installed then in your timeline when it finds a link for media it will display the contents when you click the click. Well I decided to resize the videos and give them a little more 3d effect while having all the borders go away once you start it or move your mouse away. The sizes are set so it re-sizes on the screen size. Of course depending on your site layout and page widths you may have to edit the sizes a little but this will get your going. My site is 1280px wide.

Here is the code I used and added this to my html css file.

/* This is on the timeline on profiles etc for the url scanner youtube videos */
/* yt player in the action link on timeline */
@media only screen and (max-width:501px){
#profile .action_item_link iframe{ width:100%!important;height:198px!important;display:flex;margin:auto}}
@media only screen and ( min-width:501px )and ( max-width:587px){
#profile .action_item_link iframe{ width:440px!important;height:248px!important;box-shadow:2px 4px 6px rgba(0,0,0,0.8);display:flex;margin:auto}}
@media only screen and ( min-width:587px )and (max-width:998px){
#profile .action_item_link iframe{ width:420px!important;height:237px!important;box-shadow:2px 4px 6px rgba(0,0,0,0.8);display:flex;margin:auto}}
@media only screen and ( min-width:998px )and (max-width:1100px){
#profile .action_item_link iframe{ width:520px!important;height:293px!important;box-shadow:2px 4px 6px rgba(0,0,0,0.8);}}
@media only screen and ( min-width:1110px ){
#profile .action_item_link iframe{ width:640px!important;height:360px!important;box-shadow:2px 4px 6px rgba(0,0,0,0.8);}}

And here is the link to my site profile where the top three posts in the timeline are videos so click on the link and you will see the videos show up with the styling above.

http://1940snetwork.com/founder

Regards
John
updated by @john-bizley: 01/08/15 06:30:31AM

Nice one John. Thanks for sharing.

Thanks Michael