UPDATE: Someone helped me and I have now a code for it to work on Safari, but it still doesn't work on smartphone-Safari, I still need help for this one!
It seems i have to use webkitEnterFullscreen(); but I don't know how : https://developer.apple.com/documentation/webkitjs/htmlvideoelement/1633500-webkitenterfullscreen
And maybe the fact iOS refuses to apply it to a div is the only reason here...
OLD MESSAGE:
I have real difficulties to handle javascript (and not enough time this months to learn it from scratch), but with the help of people here, I have been able to have a functioning code to display videos in fullscreen when you click a specific button (without displaying the other video controls):
https://jsfiddle.net/TB54/8odtfvbe/19/ (updated fiddle, works on computer safari)
The problem is that it doesn't seem to work on Safari browsers (I can't test it directly, apart with the old windows version, but someone with a recent mac told me the button did nothing).
I have found several answers on this issue, most of them I'm not fully able to adapt to my code, due to my lack of knowledge (and despite my attempts with the windows safari version). Is there here a simple solution you would see to update my javascript code and make it functional with javascript?
Below is the full code (updated for Safari on computer):
HTML:
<div id="animatedgif_1" class="fx_fadeIn" style="position: relative; width: 100%; text-indent: 0px; ">
<video class="centrer-verticalement" width="100%" style="" muted playsinline loop autoplay>
<source src="https://www.underthedeepdeepsea.com/wp-content/uploads/videos/NUM-wish.mp4" type="video/mp4"></video>
<div id="btn_fs" onclick="go_FullScreen( this )" style="position: absolute;">
<img id="img_btn_fs" width="40" src="https://i.sstatic.net/dI5kS.png">
</div>
</div>
<div id="animatedgif_2" class="fx_fadeIn" style="position: relative; width: 100%; text-indent: 0px; padding-bottom:0em !important; ">
<video class="centrer-verticalement" width="100%" style="" muted playsinline loop autoplay>
<source src="https://www.underthedeepdeepsea.com/wp-content/uploads/videos/NUM-hobbit-1280crf.mp4" type="video/mp4"></video>
<div id="btn_fs" onclick="go_FullScreen( this )" style="position: absolute;">
<img id="img_btn_fs" width="40" src="https://i.sstatic.net/dI5kS.png">
</div>
</div>
CSS:
.fx_fadeIn img {
opacity: 00%;
transition: opacity 0.5s;
}
.fx_fadeIn:hover img {
opacity: 100%;
transition: opacity 1s;
}
.centrer-verticalement[style*="background: transparent"]+#btn_fs img {
opacity: 20%;
transition: opacity 0.5s;
}
.centrer-verticalement[style*="background: transparent"]+#btn_fs img:hover {
opacity: 100%;
transition: opacity 0.5s;
}
.fx_fadeIn .centrer-verticalement[class*="background: none"]+#btn_fs img {
opacity: 0%;
transition: opacity 0.5s;
}
.fx_fadeIn:hover .centrer-verticalement[style*="background: none"]+#btn_fs img {
opacity: 100%;
transition: opacity 1s;
}
#btn_fs {
bottom: 1em;
right: 1em;
}
JAVASCRIPT (updated):
var bool_isFullscreen = false;
//# access DIV that is container for [ video + button image ].
var myVideoGIF; //# = document.getElementById("animatedgif");
//# access DIV that is a click "hotspot" to enter fullscreen.
var myBtn_FS; //# = document.getElementById("btn_fs");
//# access IMG for button that will change mode to fullscreen.
//var img_myBtn_FS; //# = document.getElementById("img_btn_fs");
window.addEventListener('fullscreenchange', on_FS_Change, false);
function on_FS_Change(evt) {
//######################################
//# detect event for screen mode change
//#is "null" when page/element is not in Fullscreen
if (document.fullscreenElement != null) {
bool_isFullscreen = true;
}
//# assume is already in Fullscreen mode
else {
bool_isFullscreen = false;
exit_FullScreen();
}
}
function go_FullScreen(input) {
//# NOTE : child elements are in order of appearance in setup
//# Parent == DIV as container
//# children[0] == VIDEO tag is first child element
//# children[1] == DIV for button icon is second child element
//##############################################################
//## Get access to the specific clicked item's Parent (container)
myVideoGIF = document.getElementById(input.parentNode.id);
myBtn_FS = myVideoGIF.children[1];
//########################################
//## Check if screen mode is : Fullscreen
//## If already Fullscreen then just do the "on exit fullscreen" code
//## then quit (RETURN) from this function (ignores rest of code below)
if (bool_isFullscreen == true) {
exit_FullScreen(); //# handle on exit fullscreen
return; //# quit/exit code here...
}
//##############################################################
//## Will continue onto code below if NOT Fullscreen (no return)
function openFullscreen(elem) {
if (elem.requestFullscreen) {
elem.requestFullscreen();
} else if (elem.webkitRequestFullscreen) { /* Safari */
elem.webkitRequestFullscreen();
} else if (elem.msRequestFullscreen) { /* IE11 */
elem.msRequestFullscreen();
}
}
openFullscreen(myVideoGIF);
myVideoGIF.children[0].style.width = "100%"
myVideoGIF.children[0].style.height = "100%"
myVideoGIF.children[0].style.background = "transparent"
//# set to true (helps "exit_FullScreen" function )
bool_isFullscreen = true;
}
function exit_FullScreen() {
if (bool_isFullscreen == true) {
bool_isFullscreen = false;
//#########################################
//# check IF browser can use this method...
if (document.exitFullscreen) {
document.exitFullscreen()
.then(() => console.log("Document Exited from Full screen mode"))
.catch((err) => console.error(err));
myVideoGIF.children[0].style.background = "none"
}
//## OR ELSE try other browser options
/* for Safari */
else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
/* for IE11 */
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
"It seems I have to use
webkitEnterFullscreen();but I don't know how"
You can replace webkitRequestFullscreen with webkitEnterFullscreen at this line:
else if (elem.webkitRequestFullscreen) { elem.webkitRequestFullscreen(); }
which becomes:
else if (elem.webkitEnterFullscreen) { elem.webkitEnterFullscreen(); }
Update:
You can try this setup to target all situations..
function openFullscreen(elem)
{
//# for most browsers
if (elem.requestFullscreen)
{ elem.requestFullscreen(); }
//# for Safari (older versions)
else if (elem.webkitRequestFullscreen)
{ elem.webkitRequestFullscreen(); }
//# for Safari (newer versions)
else if (elem.webkitEnterFullscreen)
{ elem.webkitEnterFullscreen(); }
//# for Safari iPhone (where only the Video tag itself can be fullscreen)
else if (elem.children[0].webkitEnterFullscreen)
{
elem.children[0].webkitEnterFullscreen();
//toggle_controls(); //# your own function to show/hide iOS media controls
}
//# for Internet Explorer 11
else if (elem.msRequestFullscreen)
{ elem.msRequestFullscreen(); }
}
openFullscreen(myVideoGIF);
Things to note:
Where Safari will not allow the parent div elem to be fullscreen, try targeting the video tag itself by using elem.children[0]. to access it then try going full screen.
If only the video tag part goes into fullscreen, then you won't have a custom FS button anymore (it and everything else is under the video in fullscreen). So now you might need those -webkit-media-controls CSS styles from the previous Question. You can add/remove them by code (ie: detecting when in Safari is FS mode, in order to show iOS media player's own FS button. On exiting FS mode then you hide controls and the PNG takes over). That can be fixed later though.