How to disable display of html code for mobile?

Question

PHP

Good day. Need an easy answer to an easy question.
Available:

<video autoplay loop poster="http://loftofficial.ru/wp-content/uploads/2015/06/bg.jpg" id="bgvid">
<source src="http://loftofficial.ru/wp-content/uploads/2015/06/video.webm" type="video/webm">
<source src="http://loftofficial.ru/wp-content/uploads/2015/06/video.mp4" type="video/mp4">
</video>

Needed:
So that if a person logged in from such devices as

if(/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino/i.test(a)||/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0,4)))check = false})(navigator.userAgent||navigator.vendor||window.opera);

saw only the background that body has.
Result:
that is, so that instead of VIDEO, he sees just body. So that the variable that is higher is not available to him.

Answer 1

in PHP, insert a check when initializing the page on the User-Agent:

$ismobile=false;

$ua=$_SERVER['HTTP_USER_AGENT'];
$res = stripos($ua, 'MIDP'); 

if (stripos($ua, 'Apple-iP') || stripos($ua, 'mobi') || stripos($ua, 'Symbian')
|| stripos($ua, 'Windows CE') || stripos($ua, 'PPC') || stripos($ua, 'CLDC')
//|| stripos($ua, ' U;') 
|| stripos($ua, 'Windows Phone')
|| stripos($ua, 'UP.Browser')
|| stripos($ua, 'portalmmm')
|| stripos($ua, 'Nintendo Wii')
|| stripos($ua, 'compatible; MSIE 6.0; Nitro')
|| stripos($ua, 'Linux armv')
|| stripos($ua, 'PalmSource')
|| stripos($ua, 'PalmOS')
|| stripos($ua, 'EPOC')
|| stripos($ua, 'Android')
|| stripos($ua, 'netfront')
|| stripos($ua, 'ucweb')
|| strpos($ua, 'SEC-')
|| stripos($ua, 'j2me')
|| stripos($ua, 'ReqwirelessWeb')
|| stripos($ua, 'Opera Mini')
|| stripos($ua, 'PlayStation')
|| stripos($ua, 'ProxiNet')
|| stripos($ua, 'Elaine')
) {
$ismobile=true;
}

then write in HTML code (PHP) template:
<?if (!ismobile) { ?>[video]<? } ?>

Answer 2

Well, firstly, I would do the opposite - there is no video by default, but if a person logged in from a desktop (or from a non-mobile device), then it is added.
If you don’t bother with it, then something like this: jsfiddle.net/Murmurianez/dxrt6nwx/1

Answer 3

Can be hidden using mediaquery for small resolutions. The easiest option, but it will also hide on the desktop.
You can hide js-ohm well, according to the condition you suggested.

Answer 4

I support the question. But in terms of optimization. I looked all over the Internet - I did not find it. It would be ideal if the specified object will not be loaded into the DOM at all on mobile devices.
Because if through mediaquery, then the object is still loaded and eats resources, and the User-Agent does not always work correctly

Answer 5

$(function() {

  addVideoToSectionIfItIsPossible();

  function addVideoToSectionIfItIsPossible(){
    if(!Modernizr.video) return;
    if($.browser.mobile) return;

    var windowWidth = $(window).width();

    function GetHtml5VideoElementByWidth(windowWidth){
      var videoFileName,
        html5VideoElement;
      if(windowWidth <= 1280){
        videoFileName = "medium";
      }
      else if(windowWidth <= 1600){
        videoFileName = "large";
      }
      else {
        videoFileName = "x-large";
      }

      html5VideoElement = "<video autoplay src=\"video/" 
                + videoFileName + ".mp4\" loop></video>";
      return html5VideoElement;
    }

    var html5VideoElement = GetHtml5VideoElementByWidth(windowWidth);
    $('#intro').append(html5VideoElement);
  }

});