Workaround for Autoplay on Iframe for Phones and Tablets

Is there any CSS (or anything) I can add to my media queries that would recognize what the device the video is playing on? I am looking to have a play button appear on my site when the video attempts to play on any device that does not allow auto play. Let me know your thoughts, my site is live and published at

Javascript to hide button:

var supports_video_autoplay = function(callback) {

  var v = document.createElement("video");
  v.paused = true;
  var p = "play" in v &&;

  typeof callback === "function" && callback(!v.paused || "Promise" in window && p instanceof Promise);


// usage
supports_video_autoplay(function(supported) {
  if (supported) {
    // video autoplay supported!
  document.getElementById("Playing1").style.display = "none";
  } else {
    // no video autoplay support :(


1 answer

  • answered 2018-03-13 21:01 Almonds

    I don't think there is a clean css solution for this. There is a related question here

    Maybe you could display the play button by default and hide it when the media element's playing event(not the play event, but playing) is triggered? If you add transitions to it it won't blink for devices that has auto-play support.

    Something like

    var video = document.getElementsByTagName("video")[0];
    video.addEventListener("playing", function() {
      // Hide or fade out the initial play button