# Google Ima Ads plugin

## Code Source

    <!--Load Viddeojs and Ima CSS into website Body tag-->
    <link href="../skins/nuevo/videojs.min.css" rel="stylesheet" type="text/css" />
    <link href="../skins/nuevo/ima.min.css" rel="stylesheet" type="text/css" />

    <!--Load Ima SDK Loader, videojs and necessary plugins-->
    <script src="//imasdk.googleapis.com/js/sdkloader/ima3.js"></script>
    <script src="../video.min.js"></script>
    <script src="../plugins/videojs.ima.min.js"></script>
    <script src="../plugins/videojs-contrib-ads.min.js"></script>
    <script src="../nuevo.min.js"></script>

    <!--Video tag setup-->
    <video id="player_1" class="video-js vjs-fluid" controls preload playsinline poster="../examples/assets/images/poster.jpg">
    	<source src="//opencdn.b-cdn.net/video/demo_720.mp4" type="video/mp4">
    	<source src="//opencdn.b-cdn.net/video/demo_720.webm" type="video/webm">
    </video>

    <!--Initialize player and Nuevo pluging-->
    <script>
    	var player = videojs('player_1');
    	player.nuevo({
    		//option1: 'value',
    		//option2: 'value'
    	});

    	<!--Initialize Ima Ads-->
    	var options = {
    		id: 'player_1',
    		adTagUrl: 'YOUR_IMA_AD_TAG'
    	};

    	<!--Enable iOS playback-->
    	google.ima.settings.setDisableCustomPlaybackForIOS10Plus(true);
    	player.ima(options);

    	<!--Part required for proper Ima playback on mobile device-->
    	var contentPlayer =  document.getElementById('player_1_html5_api');
    	if ((navigator.userAgent.match(/iPad/i) ||
    		  navigator.userAgent.match(/Android/i)) &&
    		contentPlayer.hasAttribute('controls')) {
    	  contentPlayer.removeAttribute('controls');
    	}
    	var startEvent = 'click';
    	if (navigator.userAgent.match(/iPhone/i) ||
    		navigator.userAgent.match(/iPad/i) ||
    		navigator.userAgent.match(/Android/i)) {
    	  startEvent = 'touchend';
    	}

    	player.one(startEvent, function() {
    		player.ima.initializeAdDisplayContainer();
    	});
    </script>

This is optimal code to load and play Adsense video Ima ads, including mobile devices.
Pay attention to player unique id. It appears 4 times: as video id, to initialize videojs, as Ima options id and as a part if IMA contentPlayer id. Of course it must be same across entire player code setup. In our code example unique id is easy to find, marked in blue color.
It is required to setup proper CORS (Cross-Origin Resource Sharing) configuration on server to enable cross-site HTTP requests.
Implementing the request headers to set up CORS correctly depends on the language and framework of the backend.
More information about enabling CORS you can find on https://enable-cors.org