I have a worry with wp video shortcode (for a video on loop and autoplay), which plays fine on firefox, but who doesn't in chrome.
This is my code:
<div class="fullscreen-button-only">
[video mp4="https://www.underthedeepdeepsea.com/wp-content/uploads/videos/NUM-still-life.mp4" poster="" muted="true" loop="true" autoplay="true"]
</div>
The div here allows to apply a class to the video, with a css which hides all controls except the fullscreen button, which appear when you hover the video.
Usually I would resolve this by using a more classical videotag, like this one:
<div class="fullscreen-button-only">
<video src="https://www.underthedeepdeepsea.com/wp-content/uploads/videos/NUM-still-life.mp4" preload="true" autoplay="true" muted="true" loop="true" playsinline width="100%" poster=""></video>
</div>
It works on chrome, but it's far more difficult to make appear the fullcscreen button alone on it.
Is there a solution to make the traditional [wp video] shortcode work with loop and autoplay?
UPDATE : HERE IS THE SOLUTION for video with only a full-screen button, with the last fixes needed (thanks to my brother!) added to the great code proposed by VC.One. Here is the code working.
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;
}
Note that if you put the HTML code on wordpress, it will add a <p> after the video tag, which will need an adaptation of a part of the CSS, like that:
.centrer-verticalement[style*="background: black"]+p+#btn_fs img {
opacity: 20%;
transition: opacity 0.5s;
}
.centrer-verticalement[style*="background: black"]+p+#btn_fs img:hover {
opacity: 100%;
transition: opacity 0.5s;
}
.fx_fadeIn .centrer-verticalement[class*="background: #010101"]+p+#btn_fs img {
opacity: 0%;
transition: opacity 0.5s;
}
.fx_fadeIn:hover .centrer-verticalement[style*="background: #010101"]+p+#btn_fs img {
opacity: 100%;
transition: opacity 1s;
}
And finally, you can add this CSS code at the end of all that, if you want the fullscreen icon to always appear for smartphones and ipad :
@media only screen and (max-width: 768px) {
.fx_fadeIn img {
opacity: 20% !important
}
}
@media only screen and (hover: none) and (pointer: coarse) {
.fx_fadeIn img {
opacity: 20% !important
}
}
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) {
//# 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);
myVideoGIF.children[0].style.width = "100%"
myVideoGIF.children[0].style.height = "100%"
myVideoGIF.children[0].style.background = "black"
//# set to true (helps "exit_FullScreen" function )
bool_isFullscreen = true;
}
var videoContainer = document.getElementByClassName('fx_fadeIn');
var video = videoContainer.getElementsByTagName('video');
function toggleVideoFullscreen() {
if (video.webkitEnterFullScreen) {
// Toggle fullscreen in Safari for iPad
video.webkitEnterFullScreen();
} else {
// Toggle fullscreen for other OS / Devices / Browsers
}
}
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 = "#010101"
}
//## OR ELSE try other browser options
/* for Safari */
else if (document.webkitExitFullscreen) {
document.webkitExitFullscreen();
}
/* for IE11 */
else if (document.msExitFullscreen) {
document.msExitFullscreen();
}
}
}
Here is the full jsfiddle: https://jsfiddle.net/TB54/keLy49z8/19/
Finally, note that those multiple videos won't autoplay on Xiaomi Mi browser, but that's another problem not related to the code.
"Usually I would resolve this by using a more classical video tag... But it's far more difficult to make appear the fullscreen button alone on it."
Update:
Here is some example code you can study, then also apply the same logic into your WordPress.
(eg: put Styles/Scripts wherever these Styles/Scripts are put when creating WP articles or pages).
The code below uses an image to create a custom fullscreen button. This should work in all browsers because it is just an <img> tag inside a <div> with a "click" listener.
PS: You can download (and customize) a free fullscreen icon here: icons8.com.
(Another good site for customized PNG icons, but you cannot remove their big advert. You must scroll down by a small amount until you see the "Edit Vector" option next to the icon (is at bottom left of icon).
code example (updated 19/01/2022):
<!DOCTYPE html>
<html>
<style>
/* .fade-in-image { animation: fadeIn 4s; } */
.fx_fadeIn img
{ opacity: 30%; transition: opacity 2s; }
.fx_fadeIn:hover img
{
opacity: 100%;
transition: opacity 1s;
}
</style>
<body>
<div id="animatedgif_1" class="fx_fadeIn" style="position: relative; width: 640px; height: 360px;" >
<video width="100%" style="position: absolute; top: 0px" muted playsinline loop autoplay><source src="https://www.underthedeepdeepsea.com/wp-content/uploads/videos/NUM-Amandiers4.mp4" type="video/mp4"></video></p>
<div id="btn_fs" onclick="go_FullScreen( this )" style="position: absolute; top: 86%; left: 90%;">
<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: 640px; height: 360px;" >
<video width="100%" style="position: absolute; top: 0px" muted playsinline loop autoplay><source src="https://www.underthedeepdeepsea.com/wp-content/uploads/videos/NUM-still-life.mp4" type="video/mp4"></video></p>
<div id="btn_fs" onclick="go_FullScreen( this )" style="position: absolute; top: 86%; left: 90%;">
<img id="img_btn_fs" width = "40" src="https://i.sstatic.net/dI5kS.png" >
</div>
</div>
<script>
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)
myVideoGIF.requestFullscreen();
//#####################
//## ALIGN -- VERTICAL
//## Need to subtract : height of screen -minus- height of video
//## Then divide result by two to get central point
//# find the new fullscreen Width of video object
//# by temporay setting to "100w" ("vw" == viewport width)
myVideoGIF.children[0].style.width = "100vw";
//# formula = ( screen Height - video Height(eg: its clientHeight) )
//# then "Divide by 2" to get the central value from total
let align_vertical = ((screen.height - myVideoGIF.children[0].clientHeight) / 2);
myVideoGIF.children[0].style.top = align_vertical+"px"; //"5%";
//# reset back to 100% width for display inside Div's width
myVideoGIF.children[0].style.width = "100%";
//# set to true (helps "exit_FullScreen" function )
bool_isFullscreen = true;
}
function exit_FullScreen( )
{
myVideoGIF.children[0].style.top = "0px";
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));
}
//## OR ELSE try other browser options
/* for Safari */
else if (document.webkitExitFullscreen) { document.webkitExitFullscreen(); }
/* for IE11 */
else if (document.msExitFullscreen) { document.msExitFullscreen(); }
}
}
</script>
</body>
</html>
Old Answer:
This is not a final Answer, just a "super" comment for testing advice...
(1) Try adding this <div> code:
<div class="image fullscreen-button-only">
<video muted playsinline loop autoplay>
<source src="https://www.underthedeepdeepsea.com/wp-content/uploads/videos/NUM-still-life.mp4" type="video/mp4">
</video>
</div>
The result should be your page now has two videos (your original one and then also this new Div).
I will check the page for what is happening then advise further if needed...
(2) In Chrome you can try the below code to get fullscreen button only.
Note: It won't work in Firefox because it's Gecko engine but Chrome/Edge is using Webkit engine.
Copy/Paste shown code here for a quick testing
<!DOCTYPE html>
<html>
<style>
video::-webkit-media-controls-volume-control-container,
video::-webkit-media-controls-play-button,
video::-webkit-media-controls-timeline,
video::-webkit-media-controls-current-time-display,
video::-webkit-media-controls-time-remaining-display
{ display: none; }
</style>
<body>
<video width="550" height="310" oncontextmenu="return false;"
playsinline muted autoplay loop
disablepictureinpicture
controls controlsList="nodownload noplaybackrate noremoteplayback ">
<source src="https://www.underthedeepdeepsea.com/wp-content/uploads/videos/NUM-still-life.mp4" type="video/mp4">
</video>
</body>
</html>
Does that work (shows only Fullscreen button) in Chrome on Mac?