Develop Reference

How to make fullscreen work for videos on smartphone with safari?

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.stack.imgur.com/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.stack.imgur.com/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.

My background-image doesn't show when I toggle dark mode with Chrome Lite Mode

I have this issue on my website, but only when it's accessed by mobile and the first access on it. After the page is loaded, I toggle the dark mode and my images don't show up. However, when I refresh the page, the images shows normally.
That's the link for my website: https://hannahneves.github.io
The issue on my end (Android/Chrome): https://youtu.be/3zESMLQuOWc
Aparantely, the issue is related with Chrome Lite Mode. Because, when I deactivate Lite Mode the website works perfectly.
I made the dark mode toggle like this:
const html = document.querySelector('html');
const checkbox = document.querySelector('.switch');
let check;
(() => {
check = localStorage.getItem('check');
if(check) {
html.classList.toggle('dark-mode');
}
})();
checkbox.addEventListener('change', function(){
check = html.classList.toggle('dark-mode');
if(check == true) {
localStorage.setItem('check', check);
} else {
localStorage.clear();
}
});
And the images is uploaded using variables on CSS, like this:
:root {
--portfolio: url('/assets/LightMode/portfolio.svg');
}
.dark-mode:root {
--portfolio: url('/assets/DarkMode/portfolio.svg');
}
.portfolio-animation{
background: var(--portfolio);
background-size: 100%;
background-repeat: no-repeat;
width: 267.5px;
height: 182px;
margin: 0 auto;
}

I didn't find a specific solution for this issue, but I managed to solve my problem doing the pre-load image: Preloading CSS Images
Thank you all for being helpful and understanding!

How to stop scrolling in general on iOS for Chrome or Safari - CSS/ JavaScript or jQuery

I created an input element, which contains a click eventlistener, that when it fires it runs a function, that makes an element visible by the css rule "display:block;".
This element contains the following rules:
.elementExample
{
display:none;
position: fixed;
top: 0;
left: 0;
z-index: 5;
width: 100vw;
height: 100vh;
background-color: white;
font-size: 1.3em;
overflow: hidden;
-ms-overflow: hidden;
}
In a few words, this element comes at the top of everything else, as I want this input element to be at the top of the mobile screen, as it runs an autocomplete function, for showing results that the user has to select.
Everything works great, I managed to do it, however what I am struggling is to make in iOS chrome and safari to stop any sort of scrolling on the entire page and only have a scrolling option within the results only, as when the user is in focus on an input box, the user can scroll down freely. This happens, only while the user is in focus. This is the relevent coding I tried to do it with:
html .inputHighlightText:focus
{
overflow: hidden!important;
-webkit-overflow: hidden!important;
-moz-overflow: hidden!important;
-o-overflow: hidden!important;
-ms-overflow: hidden!important;
}
this.preventDefault = function(e) {
e = e || window.event;
if (e.preventDefault)
e.preventDefault();
e.returnValue = false;
}
this.disable_scroll_mobile = function(el = null){
if(el !== null) {
$(el).focus((e) => {
e.preventDefault();
});
}
$("body").css("overflow", "hidden!important");
$("#fullScreenBg").css("overflow", "hidden!important");
$(window).css("overflow", "hidden!important");
window.addEventListener('touchmove',$self.preventDefault, false);
document.addEventListener('touchmove',$self.preventDefault, false);
window.addEventListener('scroll',$self.preventDefault, false);
document.addEventListener('scroll',$self.preventDefault, false);
}
this.enable_scroll_mobile = function(){
$("body").css("overflow", "scroll");
$("#fullScreenBg").css("overflow", "scroll");
$(window).css("overflow", "scroll");
window.removeEventListener('touchmove',$self.preventDefault, false);
document.removeEventListener('touchmove',$self.preventDefault, false);
window.removeEventListener('scroll',$self.preventDefault, false);
document.removeEventListener('scroll',$self.preventDefault, false);
}
this.disable_scroll_mobile();
I tried everything. How do I stop iOS users from scrolling while they are in focus on input, unless if they scroll on the list that appears?

"all devices except iOS respect the overflow: hidden" - Will Po
Take a look on Will's great post about it:
https://medium.com/jsdownunder/locking-body-scroll-for-all-devices-22def9615177

jquery overlay background dimming doesn't go away on IE9 after overlay dismissed

Let me preface this by saying that I'm new to jquery and fairly new to javascript.
I searched around a bit and found a overlay tutorial I was able to follow and at this point I don't even remember where I got it. I've got the following that works (almost):
function showOverlayBox() {
//if box is not set to open then don't do anything
if( isOpen == false ) return;
// set the properties of the overlay box, the left and top positions
$('.overlayBox').css({
display:'block',
left:($(window).width() - $('.overlayBox').width()) / 2,
top:($(window).height() - $('.overlayBox').height()) / 2 -20,
position:'absolute'
});
// set the window background for the overlay. i.e the body becomes darker
$('.bgCover').css({
display:'block',
width: $(window).width(),
height:$(window).height()
});
}
function doOverlayOpen() {
//set status to open
isOpen = true;
showOverlayBox();
$('.bgCover').css({opacity:0}).animate({opacity:0.5, backgroundColor:'#000'});
// dont follow the link : so return false.
return false;
}
function doOverlayClose() {
//set status to closed
isOpen = false;
$('.overlayBox').css( 'display', 'none' );
// now animate the background to fade out to opacity 0
// and then hide it after the animation is complete.
$('.bgCover').animate({opacity:0}, null, null, $(this).hide(););
}
<style type="text/css">
body { font:76% verdana; }
.bgCover { background:#000; position:absolute; left:0; top:0; display:none; overflow:hidden }
.overlayBox {
border:5px solid #09F;
position:absolute;
display:none;
width:500px;
height:300px;
background:#fff;
overflow: scroll;
}
.overlayContent {
padding:10px;
}
.closeLink {
float:right;
color:red;
}
a:hover { text-decoration:none; }
h2 {
padding:5px;
margin:0;
}
</style>
<div class="bgCover"> </div>
<div class="overlayBox">
<div class="overlayContent">
Close
</div>
</div>
Launch Window
<script type="text/javascript">
// if window is resized then reposition the overlay box
$(window).bind('resize',showOverlayBox);
// activate when the link with class launchLink is clicked
$('a.launchLink').click( doOverlayOpen );
// close it when closeLink is clicked
$('a.closeLink').click( doOverlayClose );
</script>
This runs fine for me in a standalone page. However, for some reason when I put this into the page I need it on, when I click the close on the overlay box, bgCover doesn't go away. This happens in IE9 but not in FF 3.6.10. If i comment out the line:
$('.bgCover').css({opacity:0}).animate({opacity:0.5, backgroundColor:'#000'});
in doOverlayOpen, it works as expected except of course that the .bgCover is all black and not transparent (I'm guessing this is because the animation doesn't ever happen).
If I replace the function call in the doOverlayClose animate call (currently just executing $(this).hide();) with a function, I can see that it never gets called. example:
function doOverlayClose() {
//set status to closed
isOpen = false;
$('.overlayBox').css( 'display', 'none' );
// now animate the background to fade out to opacity 0
// and then hide it after the animation is complete.
$('.bgCover').animate({opacity:0}, null, null, testFunction);
}
function testFunction() {
alert("GotHere!");
$(this).hide();
}
The alert never fires.
It appears as though the remove line never happens on IE9 for some reason under some circumstances but I can't figure out why.
Obviously it is a difference in environment between the two pages (where it works and where it doesn't) but I'm not finding anything to tell me what exactly. Can anyone point me in the right direction of what I should be looking for?

What happends if you do not use the css?
doOverlayOpen{
...
$('.bgCover').animate({opacity:0.5, backgroundColor:'#000'});
}
doOverlayClose
...
$('.bgCover').animate({opacity:0, backgroundColor:'transparent'});
}

Firefox drags div like it was an image

I'm using this HTML,CSS and Javascript code (in one document together if you want to test it out):
<style type="text/css">
#slider_container {
width: 200px;
height: 30px;
background-color: red;
display:block;
}
#slider {
width: 20px;
height: 30px;
background-color: blue;
display:block;
position:absolute;
left:0;
}
</style>
<script type="text/javascript" src="../../js/libs/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("#slider").mousedown(function() {
$(document).mousemove(function(evnt) {
$("#test").html("sliding");
}).mouseup(function() {
$("#test").html("not sliding");
$(document).unbind("mousemove mouseup");
});});
});
</script>
<div id="test">a</div>
<div id="slider_container">
<div id="slider"></div>
</div>
Everything (surprisingly) works fine in IE, but firefox seems to totally clusterf*ck when this javascript is used. The first "slide" is okay, you drag, it says "sliding", you drop, it says "not sliding". On the second "slide" (or mousedown if you will), firefox suddenly thinks the div is an image or link and wants to drag it around.
Screenshot of the dragging:
Obviously the blue div half-positioned in the red div is the one being dragged. Windows does not capture the cursor when you take a screenshot, but it's a stop sign.
Is there someway to prevent this default behaviour?

You need to return false from the event handlers to prevent the default action (selecting text, dragging selection, etc). Based on the code posted by Crispy, Here is my solution:
$(function() {
var sliderMouseDown = false;
$("#slider").mousedown(function() {
sliderMouseDown = true;
return false;
});
$(document).mousemove(function(evnt) {
if (sliderMouseDown) {
$("#test").html("sliding");
return false;
}
});
$(document).mouseup(function() {
if (sliderMouseDown){
$("#test").html("not sliding");
sliderMouseDown = false;
return false;
}
});
});

Neat bug, after messing around with it, it appears that Firefox remembers the mousedown event on the slider and treats it as if the user had started selecting some text (hence the "stop sign" you were seeing). So then Firefox treats the next mousedown event as if the user was dragging the text away somewhere. There might be a more appropriate solution, but simply adding a
$("#slider").focus()
does the trick since then Firefox will "reset" the cursor so it won't think the user is dragging some text.
I'd also like to comment you're repeatedly binding and unbinding events (which doesn't seem to sit well with ie7 doing multiple drags). I would suggest something like the following, which binds the delegates once.
$(function() {
var sliderMouseDown = false;
$("#slider").mousedown(function() {
sliderMouseDown = true;
});
$(document).mousemove(function(evnt) {
if (sliderMouseDown) {
$("#test").html("sliding");
}
});
$(document).mouseup(function() {
if (sliderMouseDown)
{
$("#test").html("not sliding");
$("#slider").focus(); //<-- fix the FF issue to reset cursor
sliderMouseDown = false;
}
});
});