为什么Vimeo iframe在页面上单击时会闪烁？

Question

我创建了一个简单的过滤器，可加载Vimeo iframe。这是在ng-repeat指令中。一切正常，除了在我单击网页上的任何位置时iframe都会闪烁。每当我在textarea或input字段中按一个键（发生在“ keyup”上）时，也会发生这种情况。有点奇怪，因为页面上的其他所有内容都没有闪烁-只有包含Vimeo视频的iframe。这是我的代码：

<div ng-app="myApp">
    <div ng-controller="myAppCtrl"> 
        <div ng-repeat="item in items">
            <div id="{{item.video.code}}">{{item.video.code | vimeo}}</div>
        </div>
    </div>
</div>

var myApp = angular.module('myApp', []);

myApp.filter('vimeo', function() {
    return function(vimeoID) {
        var data = '<iframe src="http://player.vimeo.com/video/' + vimeoID + '" width="360" height="270" frameborder="0" webkitAllowFullScreen mozallowfullscreen allowFullScreen><\/iframe>';
        $('#' + vimeoID).html(data);
    };
});

myApp.controller("myAppCtrl",function($scope){
    // sample data
    var items = [
        {
            text : 'Hello World",
            video : {
                source : 'Vimeo',
                code : '101468694'
            }
        },
        {
            text : 'Hello People",
            video : {
                source : 'Vimeo',
                code : '35375393'
            }
        }
    ];

    $scope.items = items;
});

Any ideas on why this is happening?

Answer 1

使用“ ngx-embed-video”

单击here！这也适用于[https://stackblitz.com/edit/ngx-embed-video-example][ stackblitz.com/ngx-embed-video-example]。