Hello,
Is there a way to hide or disable the fullscreen button in igVideoPlayer?
Thanks,
Randy
Hi Randy,
There is no option allowing for showing/hiding the fullscreen button, but this can be achieved easily using CSS. Set display: none style for the following selector:
.ui-igplayer-fullscreen-button
{
display: none !important;
}
Please let me know if this helps.
Hi Nikolay,
Thank you for your message.
I edited the infragistics.css as follows:
.ui-igplayer-fullscreen-button {margin:5px;width:25px;height:25px;display: none !important;}
However, the full screen button still displays.
I must be doing something wrong, if you have any ideas please let me know.
Thanks again for your message.
In the developer tools I can only drill down as far as the <video> tag, which has a class of "ui-igplayer-video". I tried modifying that class but of course it made the entire video player disappear. As far as I can see the only tag below <video> is the <source> tag. I don't see the full screen button element in the html.
Here is the entire <div> element that contains the video player (with sources changed for brevity):
I hope I'm not missing something obvious here. Thanks for any suggestions,
Hello Randy,
Attached you can find a working sample.
Best regards,
Martin PavlovInfragistics, Inc.
Hi Martin,
I studied your example and can see the video controls in your html but still not in mine. So I will keep looking into that.
Here is one thing I noticed: In your example the controls appear when I hover. In those controls the full screen button is hidden. If right click the video player and choose "show controls" a second set of controls will appear. In this set the full screen button is visible. It is this second set of controls that I see in my html. However, I have set browserControls: false in my initialization as you have. The set of controls that appears on hover in your example (with the full screen button hidden)does not appear in mine.
I have attached a screen shot of how your example appears with the two sets of controls showing. The set in the background is the one that I see in my example.
Thank You,
The problem with the 2 pair of controls comes from the fact that igVideoPlayer uses HTML 5 VIDEO element for its functionality. igVideoPlayer renders one set of controls, the one that uses CSS. The second set of controls comes from the browser itself which are activated by the "controls" attribute of the tag.
Also, the context menu of the browser when opened on the VIDEO tag has some built in menu items like "Show controls". Choosing an option from the context menu will modify the VIDEO DOM element and apply for example the "controls" attribute. One workaround to this is to disable the context menu on the video element, so that the user cannot trigger any browser built in functionality.
Here is an example code on how to prevent the browser context menu from popping on the igVideoPlayer:
$("#videoPlayer1").bind("contextmenu", function (e) { e.preventDefault();});
About the not showing igVideoPlayer controls... You should check if there are any JavaScript errors or if the CSS files are correctly loaded.
Hope this helps,Martin PavlovInfragistics, Inc.
Thank you, Martin. I will follow up on your suggestions and let you know what I find out.
Thank you for your reply.
I am extending this case until the 14th of June and will follow up with you at that point.
Please do not hesitate to contact us with any updates in the meantime.
Hello Tsanna,
I have not been able to resolve this yet and am still working on it. Can we keep this open a few days longer?
I will reply when I either have a solution or am not able to make any progress.
Thank you,
I am still following your case. Have you been able to resolve the issue?
If you have any concerns or questions, please feel free to contact me, I will be glad to help you.
Thank you for choosing Infragistics components!
Sincerely,
Tsanna