Can't play embedded youtube video inside an iframe of an ionic app on iOS device after showing an ad with admob
<p>I'm developing an app with Ionic and i have successfully implemented iframes showing YouTube content. On the browser everything works fine, but compiling it to iOS there is an issue. After showing an ad with admob. The iframe is not responding anymore when clicking the play button of the embedded youtube video. Without creating banner views or other ads, everything works fine. </p>

<p>Has anyone an idea why this is happening?</p>

<p>Thanks in advance.</p>

<p>Update: When I use a button which renews the src of the iframe with jQuery I can press the play button of the embedded video and watch it. In the code you see the workaround with showing the thumbnail of the video first and loading the embedded url after pressing the button. </p>

<p>The AdService</p>

<pre><code>function AdService(admobSvc) {

    var service = {};

    service.ShowInterstitial = Interstitial;
    service.ShowBanner = Banner;

    return service;

    function Interstitial() {
       admobSvc.requestInterstitialAd();
    }

    function Banner() {
      admobSvc.createBannerView();
   }
}
</code></pre>

<p>The iframe</p>

<pre><code>&lt;div id="button-bar23" class=" button-bar "&gt;
    &lt;button ng-click="vm.play($index, trailer.embedded)" class=" button button-assertive  icon ion-social-youtube "&gt;#{{$index + 1}} {{video.titel}}&lt;/button&gt;
&lt;/div&gt;
&lt;div id="video-container{{$index}}" class="video-container"&gt;
    &lt;iframe ng-click="vm.play($index)" id="video{{$index}}" src="{{video.thumbnail}}" frameborder="0" allowfullscreen="" width="560" height="315"
                     style="position:absolute;top:0;left:0;width:100%;height:100%;"&gt;&lt;/iframe&gt;
&lt;/div&gt;
</code></pre>

<p>Controller</p>

<pre><code>function videoCtrl(ApiService, SharingService, AdService) {

    var vm = this;

    ...

    vm.play = function(index, embedded){
        console.log(index);
        $("#video"+index)[0].src = embedded;
    }

    vm.change = function () {
        AdService.ShowInterstitial();
    }
}
</code></pre>

<p>Route</p>

<pre><code>angular.module('app.routes', []).config(function ($stateProvider, $urlRouterProvider, $sceDelegateProvider) {

    $stateProvider

        .state('menu.videos', {
            url: '/videos',
            views: {
                'side-menu': {
                    templateUrl: 'templates/videos.html',
                    controller: 'videoCtrl as vm'
                }
            }
        })
        ...
</code></pre>