HTML5 video with custom buttons not working for mobile?

Design help Custom code
1

Hi,

I think I have set everything up correctly for a HTML5 video with custom buttons. However it is not showing for mobile, any ideas?
I have created a mp4, webm and ogg formats as advised. The buttons seem to be showing for mobile, but no video.
The HTML embedded div is at the bottom of the UI guidelines page.
http://emt-finalversion.webflow.io/uiguidelines
edit only link:
https://preview.webflow.com/preview/emt-finalversion?preview=76cab11864ccdfe323a4bfede1ccd3ed
I am a designer and not developer so any help would be amazing as I am now stuck! Many thanks in advance for your time and help. Best, Ru

image

HTML








**CSS** 

        <style>
#video-container, #playpausebtn, #mutebtn, {
          -moz-box-sizing: border-box;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
        }

        #video-container {
          display: flex;
          position: relative;
          align-items: flex-end;
          justify-content: flex-start;
        }

        div#video_controls_bar {
          position: absolute;
          width: 100%;
          height: auto;
          padding-bottom: 20px;
          padding-left: 20px;
          opacity: 1;
          -webkit-transition: opacity .3s;
          -moz-transition: opacity .3s;
          -o-transition: opacity .3s;
          -ms-transition: opacity .3s;
          transition: opacity .3s;
        }

        #video-container:hover #video_controls_bar {
          opacity: 1;
        }

        button#playpausebtn {
          background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNjEgNjEiPiAgPGRlZnM+ICAgIDxzdHlsZT4gICAgICAuY2xzLTEgeyAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQpOyAgICAgIH0gICAgPC9zdHlsZT4gICAgPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQiIHkxPSIzMC41IiB4Mj0iNjEiIHkyPSIzMC41IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+ICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZGJmZjY2Ii8+ICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNjZmZmFkIi8+ICAgIDwvbGluZWFyR3JhZGllbnQ+ICA8L2RlZnM+ICA8dGl0bGU+UGxheS12aWQ8L3RpdGxlPiAgPGcgaWQ9IkxheWVyXzIiIGRhdGEtbmFtZT0iTGF5ZXIgMiI+ICAgIDxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+ICAgICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNjEsNjFIMFYwSDYxWk0xLDYwSDYwVjFIMVpNMjAuNSwyMC41djIwbDIwLTEwWiIvPiAgICA8L2c+ICA8L2c+PC9zdmc+);
            background-size: auto;
            background-repeat: no-repeat;
            width: 60px;
            height: 60px;
            cursor: pointer;
            border: 0;
            display: relative;
            left: 0px;
            outline: none;
        }

        button#playpausebtn:hover {
          cursor: pointer;
        }

        button#mutebtn {
          background: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNjEgNjEiPiAgPGRlZnM+ICAgIDxzdHlsZT4gICAgICAuY2xzLTEgeyAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQpOyAgICAgIH0gICAgPC9zdHlsZT4gICAgPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQiIHkxPSIzMC41IiB4Mj0iNjEiIHkyPSIzMC41IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+ICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZGJmZjY2Ii8+ICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNjZmZmFkIi8+ICAgIDwvbGluZWFyR3JhZGllbnQ+ICA8L2RlZnM+ICA8dGl0bGU+bXV0ZTwvdGl0bGU+ICA8ZyBpZD0iTGF5ZXJfMiIgZGF0YS1uYW1lPSJMYXllciAyIj4gICAgPGcgaWQ9IkxheWVyXzEtMiIgZGF0YS1uYW1lPSJMYXllciAxIj4gICAgICA8cGF0aCBjbGFzcz0iY2xzLTEiIGQ9Ik02MSw2MUgwVjBINjFaTTEsNjBINjBWMUgxWk0yMy41LDI2LjV2OGg2Ljg1bDcuMjcsNnYtMjBsLTcuMjcsNloiLz4gICAgPC9nPiAgPC9nPjwvc3ZnPg==);;
          background-size: 100% 100%;
          background-repeat: no-repeat;
        	width: auto;
          background-color: ;
          display: none;
          vertical-align:middle;
        }
</style>

JS

<script>
var vid, playbtn, mutebtn ;
playbtn = document.getElementById("playpausebtn");
vid = document.getElementById("my_video");
videoContainer = document.getElementById("video-container");
controlsBar = document.getElementById("video_controls_bar");

function intializePlayer(){
	// Set object references
	mutebtn = document.getElementById("mutebtn");
	// Add event listeners
	playbtn.addEventListener("click",playPause,false);
	mutebtn.addEventListener("click",vidmute,false);
  
}

playbtn.onclick = function() {
	this.classList.toggle("playing");
  showHideControls();
}
	
function showHideControls() {
if(playbtn.classList.contains("playing")) {
  videoContainer.onmouseover = function(){
    controlsBar.style.opacity = 1;
  };
  videoContainer.onmouseleave = function(){
    controlsBar.style.opacity = 0;
  };
}
}

vid.onended = function() {
   playbtn.style.background = "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNjEgNjEiPiAgPGRlZnM+ICAgIDxzdHlsZT4gICAgICAuY2xzLTEgeyAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQpOyAgICAgIH0gICAgPC9zdHlsZT4gICAgPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQiIHkxPSIzMC41IiB4Mj0iNjEiIHkyPSIzMC41IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+ICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZGJmZjY2Ii8+ICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNjZmZmFkIi8+ICAgIDwvbGluZWFyR3JhZGllbnQ+ICA8L2RlZnM+ICA8dGl0bGU+UGxheS12aWQ8L3RpdGxlPiAgPGcgaWQ9IkxheWVyXzIiIGRhdGEtbmFtZT0iTGF5ZXIgMiI+ICAgIDxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+ICAgICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNjEsNjFIMFYwSDYxWk0xLDYwSDYwVjFIMVpNMjAuNSwyMC41djIwbDIwLTEwWiIvPiAgICA8L2c+ICA8L2c+PC9zdmc+)";
	 playbtn.style.backgroundSize = "auto" ;
   playbtn.style.backgroundRepeat = "no-repeat";
   vid.load();
	 controlsBar.style.opacity = 1;
};

window.onload = intializePlayer;
function playPause(){
	if(vid.paused){
		vid.play();
		playbtn.style.background = "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNjEgNjEiPiAgPGRlZnM+ICAgIDxzdHlsZT4gICAgICAuY2xzLTEgeyAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQpOyAgICAgIH0gICAgPC9zdHlsZT4gICAgPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQiIHkxPSIzMC41IiB4Mj0iNjEiIHkyPSIzMC41IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+ICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZGJmZjY2Ii8+ICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNjZmZmFkIi8+ICAgIDwvbGluZWFyR3JhZGllbnQ+ICA8L2RlZnM+ICA8dGl0bGU+cGF1c2U8L3RpdGxlPiAgPGcgaWQ9IkxheWVyXzIiIGRhdGEtbmFtZT0iTGF5ZXIgMiI+ICAgIDxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+ICAgICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNMjAuNSw0MC41aDV2LTIwaC01Wm0xNSwwaDV2LTIwaC01Wk02MSw2MUgwVjBINjFaTTEsNjBINjBWMUgxWiIvPiAgICA8L2c+ICA8L2c+PC9zdmc+)";
		playbtn.style.backgroundSize = "auto";
    playbtn.style.backgroundRepeat = "no-repeat";
	} else {
		vid.pause();
		playbtn.style.background = "url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB2aWV3Qm94PSIwIDAgNjEgNjEiPiAgPGRlZnM+ICAgIDxzdHlsZT4gICAgICAuY2xzLTEgeyAgICAgICAgZmlsbDogdXJsKCNsaW5lYXItZ3JhZGllbnQpOyAgICAgIH0gICAgPC9zdHlsZT4gICAgPGxpbmVhckdyYWRpZW50IGlkPSJsaW5lYXItZ3JhZGllbnQiIHkxPSIzMC41IiB4Mj0iNjEiIHkyPSIzMC41IiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSI+ICAgICAgPHN0b3Agb2Zmc2V0PSIwIiBzdG9wLWNvbG9yPSIjZGJmZjY2Ii8+ICAgICAgPHN0b3Agb2Zmc2V0PSIxIiBzdG9wLWNvbG9yPSIjNjZmZmFkIi8+ICAgIDwvbGluZWFyR3JhZGllbnQ+ICA8L2RlZnM+ICA8dGl0bGU+UGxheS12aWQ8L3RpdGxlPiAgPGcgaWQ9IkxheWVyXzIiIGRhdGEtbmFtZT0iTGF5ZXIgMiI+ICAgIDxnIGlkPSJMYXllcl8xLTIiIGRhdGEtbmFtZT0iTGF5ZXIgMSI+ICAgICAgPHBhdGggY2xhc3M9ImNscy0xIiBkPSJNNjEsNjFIMFYwSDYxWk0xLDYwSDYwVjFIMVpNMjAuNSwyMC41djIwbDIwLTEwWiIvPiAgICA8L2c+ICA8L2c+PC9zdmc+)";
		playbtn.style.backgroundSize = "auto" ;
    playbtn.style.backgroundRepeat = "no-repeat";
	}
}
function vidmute(){
	if(vid.muted){
		vid.muted = false;
		mutebtn.innerHTML = "Mute";
	} else {
		vid.muted = true;
		mutebtn.innerHTML = "Unmute";
	}
}
</script>
2

Hi, anybody willing and available to try and crack this issue?

3

These source lines have some misplaced spaces, and should be:

<video id="my_video" playsinline style="min-width:100%; min-height:100%;" poster="https://drive.google.com/uc?export=view&id=1dx6WH1UXlATlAKl-bN7S5NU2gwOpyVaQ">
  <source src="https://drive.google.com/uc?export=view&id=1aQxqe2l7dPijbMNsq2H1IxRRZUdoPMui" type="video/mp4" />
  <source src="https://drive.google.com/uc?export=view&id=1go1wogvdOqbbERsZhmXep3sovej1_RzS" type="video/3gp" />
  <source src="https://drive.google.com/uc?export=view&id=1doCJCa7FHO0hqj-vHdBPgcE17wMx0shO" type="video/webm" />
  <source src="https://drive.google.com/uc?export=view&id=1tS3mahCOQfxrXWWEJSSWBAFgcUtsfxQV" type="video/ogg" />
</video>

The js looks good to me. Which mobile browsers are you testing in? Since most systems support mp4 now, you might want to try just using a video tag with the src as the mp4 version:

<video id="my_video" playsinline src="https://drive.google.com/uc?export=view&id=1aQxqe2l7dPijbMNsq2H1IxRRZUdoPMui" style="min-width:100%; min-height:100%;" poster="https://drive.google.com/uc?export=view&id=1dx6WH1UXlATlAKl-bN7S5NU2gwOpyVaQ" />
1 Like
4

Hey,
thanks for helping out. I am testing on iphone 7. safari works with a minor css issue, but its not showing on Chrome, I have not tested on a physical android, in inspect on chrome desktop, its implies it works on galaxy S5 and pixel phones.

Just using the video tag
<video id="my_video" playsinline src="https://drive.google.com/uc?export=view&id=1aQxqe2l7dPijbMNsq2H1IxRRZUdoPMui" style="min-width:100%; min-height:100%;" poster="https://drive.google.com/uc?export=view&id=1dx6WH1UXlATlAKl-bN7S5NU2gwOpyVaQ" />
does not work for me, it does not call in the custom buttons

5

Hey @forresto , any idea why it is not showing on Chrome in mobile? I may just opt for standard video controls with the video tag

6

Relying on native/standard video controls is a good idea.

But the custom video button (on http://emt-finalversion.webflow.io/uiguidelines) does work for me in Android Chrome on Browserstack:

wf-emt-vid
wf-emt-vid295×525 1.14 MB