Name is required.
Email address is required.
Invalid email address
Answer is required.
Exceeding max length of 5KB

Need an option to add a border around the JW Player, not using programming

I'm not much of a programmer and would really like to see an option to choose a border for my JW Player. My website is white and I have a lot of white recordings, which makes for poor viewing of the video.

I've seen a border added nicely to a video player called Easy Video Player. It is used on a WordPress installation just the the JW Player (plugin) I'm currently using on my website.

At the least, it would be great to be able to select a border color and size. It would be ever nicer if cool drop shadow effects could be incorporated like the Easy Video Player I saw.

Any chance of either of these things happening?

9 Community Answers

Up Down

JW Player

User  
0 rated :

Megan,

Well, I'm not really sure if I need something more than a skin or not. I don't thing there are any skins with borders, are there?

I'm currently using Glow and it does not have a border. When you use a video with a white power point slide against a white website background, it is impossible to tell where the website ends and the slide begins. It looks very bad. I would prefer a border to solve this.

I did try a couple ways to style a border around the player, but the border does not line up with the player on the bottom and right side borders. It's like there is some invisible portion of the player pushing the border further out than it should be. Do you have any suggestions?

Is there a way to style a border directly within the object element of the player itself? Thanks!

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Hi Curt,

You are doing to have to add the border VIA CSS. I have done this before, and it definitely lines up correctly, you just need to also specify the width and height here.

For example, in-line – <div style="width:470px; height:520px;border:1px solid #000;">

That will work.

The only way to add the border directly to the player would be to do it via source code, so CSS is the best option.

Best,
-Ethan

Up Down

JW Player

User  
0 rated :

I'm interested in also creating a border for JW Player with css.

Here is an example of what I am looking to accomplish: http://bit.ly/oVvZOB

Has anyone had any success in creating a similar css border?

Thanks,

Jake

Up Down

JW Player

User  
0 rated :

This seems to have done the trick:
bc.. <div style="background: #F2F2F2;
margin: 1em;
padding: 10px;
float: left;
-webkit-border-radius: 10px;
-webkit-box-shadow: 2px 2px 10px #423942;
-moz-border-radius: 10px;
-moz-box-shadow: 2px 2px 10px #423942;
border: 1px solid #D6D6D6;
border-radius: 10px;
box-shadow: 2px 2px 10px #423942;">

Up Down

JW Player

User  
0 rated :

@jake

yes, I have and use it on my web site, www.mirana.net

bc.. .video
{
background:#292929;
background:-webkit-gradient(linear,left top,left bottom,from(#333333),to(#181818));
background:-moz-linear-gradient(top,#333333,#181818);
-pie-background:linear-gradient(#333,#181818);
behavior:url(PIE.htc);
border:1px 2px 2px 1px solid rgba(102,102,102,1);
border-radius:8px;
-webkit-border-radius:8px;
-moz-border-radius:8px;
box-shadow:2px 4px 2px rgba(0,0,0,1),inset 0px 5px 30px #575757;
-webkit-box-shadow:0 2px 2px rgba(0,0,0,1),inset 0px 5px 45px #797979;
-moz-box-shadow:3px 3px 2px rgba(0,0,0,1),inset 0 5px 30px #575757
}



Then within the I have the following
bc.. <section id="showm">
<section class="video clearfix" style="padding:5px;width:800px">
<article id="div1"></article>
</section>



here the player will instantiate the 'div1'.

Btw, the web site is in html5.

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Thanks for sharing jake ! :)

Up Down

JW Player

User  
0 rated :

Hey guys,
I know this is an old topic but any idea on how to get it to center properly using your code?
When I insert the code into my body.html it creates the border but with the player centered the border continues to fill to the edge of the screen on both sides of the player.

Cheers.

Up Down

JW Player

User  
0 rated :

Actually cancel that, I worked it out. Thanks for sharing the code :)

Up Down

Ethan Feldman

JW Player Support Agent  
0 rated :

Glad you got it :)

This question has received the maximum number of answers.