Video background - mobile img

by jssm3

HTML

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title></title>

        <!-- ALL CSS -->
        <link rel="stylesheet" type="text/css" href="https://pruebasvirality.000webhostapp.com/css/bootstrap.css">
        <link rel="stylesheet" type="text/css" href="https://pruebasvirality.000webhostapp.com/css/font-awesome.css">
        <link rel="stylesheet" type="text/css" href="https://pruebasvirality.000webhostapp.com/css/owl.carousel.css">
        <link rel="stylesheet" type="text/css" href="https://pruebasvirality.000webhostapp.com/css/owl.theme.css">
        <link rel="stylesheet" type="text/css" href="https://pruebasvirality.000webhostapp.com/css/animate.css">
        <link rel="stylesheet" type="text/css" href="https://pruebasvirality.000webhostapp.com/css/slick.css">
        <link rel="stylesheet" type="text/css" href="https://pruebasvirality.000webhostapp.com/css/flaticon.css">
        <link rel="stylesheet" type="text/css" href="https://pruebasvirality.000webhostapp.com/css/settings.css">
        <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
        <link rel="stylesheet" type="text/css" href="https://pruebasvirality.000webhostapp.com/css/style.css" >
        <link rel="stylesheet" type="text/css" href="https://pruebasvirality.000webhostapp.com/css/preset.css" >
        <link rel="stylesheet" type="text/css" href="https://pruebasvirality.000webhostapp.com/css/responsive.css">


    </head>
    <body>

        <!--BANNER VIDEO BG START-->
          <section >
            <div class="cid-qTkA127IK8 mbr-fullscreen">
                <!--<iframe width="100%" height="100vh" src="https://www.youtube.com/embed/dfokqepD5NY?controls=0" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen  class="cid-qTkA127IK8 vidbacking...

JavaScript

/*
* vidbacking
* jQuery Background video plugin for jQuery
* ---
* Copyright 2018, Sourav Mukhopadhyay (https://www.upwork.com/o/profiles/users/_~010a5ed52d2f45f4db/)
* Released under the MIT Licenses.
* Description: Allow embedding HTML5 video as page background, and element background.
* Can be used on multiple elements background on same page.
*/
(function($){
	$.fn.vidbacking = function(options){
		var settings = $.extend({
			'video-opacity': '1', //This parameter defines Video Opacity(It can't change YouTube video opacity).
			'masked': false,      //If this parameter is true then a dotted image will overlay the video.
			'mask-opacity': '1',  // It defines the mask image opacity. Only effective if "masked" is "true".
			'youtube-mute-video': false, //If you want the YouTube video to be muted.
			'youtube-loop': false,        //Set this parameter "true" to loop the YouTube video.
		},options);

		return this.each(function(){
			var targetobj = $(this),
				targettag = targetobj.prop('tagName'),
				targetid = targetobj.prop('id');

			//This section execute when the Target Object is <BODY>.
			if(targettag == 'BODY'){
				obj = $('.vidbacking');  //The video object
				objtag = obj.prop('tagName'); //The tag of the video(<IFRAME> for YouTube or <video>).
				//This section execute when YouTube iframe tag found as background video.
				if(objtag == 'IFRAME'){
					var youtube_source = obj.attr('src') + '?autoplay=1&rel=0&controls=0&showinfo=0',
						video_url_parts = obj.attr('src').split('/'),
						video_id = video_url_parts[video_url_parts.length - 1];
					//Check and set YouTube video mute if "youtube-mute-video" parameter set to "true".
					if(settings['youtube-mute-video'] == true){
						youtube_source += '&mute=1';
					}
					//Make the YouTube video loop if "youtube-loop" parameter set to "true".
					if(settings['youtube-loop'] == true){
						youtube_source +=...