Make a back up of your video player page just incase this doesnt work.
In your css file find the css selector for the right arrow:
#movie a.btn-next-project
Change its right value to -40px as below:
#movie a.btn-next-project {
right: -40px;
}
The arrow will disapear from the page but dont worry about that yet.
Next find the css selector for the left arrow:
#movie a.btn-previous-project
Change its left value to -40px as below:
#movie a.btn-previous-project {
left: -40px;
}
The arrow will disapear from the page but dont worry about that yet.
Next find the css selector for the '.aspect-ratio-container 'and comment out /*overflow:hidden;*/
The two arrows should now be visible.
Now you need to stop those arrows disappearing when the mouse leaves the video area.
Add this to the css:
#movie a.btn {
opacity: 1 !important;
display: block !important;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
Then find the below css selector and and remove #movie a.btn, from the start of it.
/* non-hover, or hover but inactive */
#movie a.btn, #movie.inactive:hover a.btn,
#movie .vjs-control-bar, #movie.inactive:hover .vjs-control-bar,
/* initializing state */
#movie.initializing a.btn, #movie.initializing.inactive:hover a.btn,
#movie.initializing .vjs-control-bar, #movie.initializing .inactive:hover .vjs-control-bar {
opacity: 0 !important;
display: block !important;
-webkit-transition: all .5s;
-moz-transition: all .5s;
-ms-transition: all .5s;
-o-transition: all .5s;
transition: all .5s;
}
Does that work?
AdChoices