ls-playvideo button huge on iphone – how to reduce arrow

I have spent the better half of a day trying every css code to reduce the play button on a HTML5 video embeded within layerslider.

I tried to use another arrow within the skin.png (couldn’t get that to work)

.ls-playvideo {
width: 50px;
height: 50px;
margin-left: -10%;
margin-top: -30%;
opacity: .5;
background-position: -300px -50px;
}

Tried the difference between div.ls-playvideo and .ls-fullwidth .ls-playvideo. Neither worked.
I tried to use a different arrow altogether.

.ls-playvideo {
background-size: 5% !important;
background: url(http://english.cnsmedicaleducation.com/wp-content/uploads/sites/8/2017/10/play-arrow_before.png) !important;
background-repeat: no-repeat;
}

That didn’t work either.
I am wrapping the code within one a @media style: @media only screen and (max-width: 767px) { } so that it will only affect the mobile devices.

Can you please tell me how to make the arrow smaller on a smartphone?

Thank you!