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

Overlapping dock buttons


I am attempting to add a custom dock button for linkedin sharing. I have added the button and it works fine by itself.
However, if I also enable the built in sharing button on the dock the buttons don't line up nicely and the linkedin button becomes very difficult to click. Please help
I am posting my code below and this is the link to the page I am testing it on dev.meetlv.com/test-2


<div id='playerHOqFiUgXaKKk'></div>
<script type='text/javascript'>
jwplayer('playerHOqFiUgXaKKk').setup({
file: 'http://wds.mp.advection.net/mp/americanpayroll/PNN/_dld/Brian-14-01-New-IRS-Comm-8188.mp4',
image: 'https://www.longtailvideo.com/content/images/jw-player/lWMJeVvV-876.jpg',
width: '100%',
aspectratio: '16:9',
skin: 'stormtrooper',
sharing: '{}'
});
</script>
<script>
jwplayer().addButton(
"http://dev.meetlv.com/wp-content/uploads/2014/03/linkedin.png",
"LinkedInShare",
function() {
window.open('https://www.linkedin.com/shareArticle?mini=true&url=http://dev.meetlv.com/test-2/&title=Test%20share&summary=&source=');
},
"linkedinShare"
);
</script>

10 Community Answers

Ethan Feldman

JW Player Support Agent  
0 rated :

Where is this running?

JW Player

User  
0 rated :

dev.meetlv.com

JW Player

User  
0 rated :

specifically dev.meetlv.comtest-2

Ethan Feldman

JW Player Support Agent  
0 rated :

Weird, I just tested locally and this doesn’t happen:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
	<link rel="icon" type="image/x-icon" href="http://www.jwplayer.com/wp-content/themes/jwplayer-105/favicon.ico">
	<title>Adding a Video Download Button</title>
    
<script src="http://jwpsrv.com/library/sUn2YCxwEeKkryIACp8kUw.js"></script>
	<style type="text/css">
      body { 
		margin: 0; padding: 0 
	}
	</style>
</head>
<body>
<div id="container"></div>
<script>
jwplayer("container").setup({
  image: "http://content.bitsontherun.com/thumbs/bkaovAYt-640.jpg",
  file: "http://content.bitsontherun.com/videos/bkaovAYt-kNspJqnJ.mp4",
  width: '100%',
  aspectratio: '16:9',
  skin: 'stormtrooper',
  sharing: {}
});
jwplayer().addButton(
        "http://dev.meetlv.com/wp-content/uploads/2014/03/linkedin.png",
        "LinkedInShare", 
        function() {
           window.open('https://www.linkedin.com/shareArticle?mini=true&url=http://dev.meetlv.com/test-2/&title=Test%20share&summary=&source=');
        },
        "linkedinShare"
);
</script>
</body>
</html>

JW Player

User  
0 rated :

Just put your code on the site instead and it is doing the same thing.
dev.meetlv.com/test-2
Any ideas?

Ethan Feldman

JW Player Support Agent  
0 rated :

Something in <link rel="stylesheet" href="http://dev.meetlv.com/wp-content/themes/infocus/shortcodes.css" type="text/css" media="screen" /> is causing this problem. When I remove it, the issue goes away.

JW Player

User  
0 rated :

So something in the stylesheet is affecting the buttons then?
Any ideas what I should look for in the sheet?

Ethan Feldman

JW Player Support Agent  
0 rated :

I am not sure, but it affects the dock buttons in html5 mode, not flash mode.

JW Player

User  
0 rated :

OK.
We won't actually be using this feature on this site, so it shouldn't end up being an issue.
Thanks for your help.

Ethan Feldman

JW Player Support Agent  
0 rated :

Np

This question has received the maximum number of answers.