我试图在YouTube iframe中嵌入angularjs点击功能，以便
1.）用户单击youtube视频，它会发出警报，例如“您单击我”，视频将立即开始播放。
2.）当用户单击它以停止视频时，它将再次发出警报，并且视频将照常停止播放。
这是angularjs功能ng-click='setResponse()'
如果我添加css并按以下代码进行调用。点击功能可以使用，但
视频将无法开始播放或停止
<style>
div.iframe-link {
position: relative;
float: left;
width: 115%;
height: 516px;
margin: 0 1em 1em 0;
}
a.iframe-link {
text-decoration:none;
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width:100%;
height:100%;
}
</style>
<div class="iframe-link">
<iframe width="560" height="315" ng-src="{{post.vid | trusted}}"
frameborder="0" allowfullscreen></iframe>
<a class="iframe-link close" ng-click='setResponse()' target="_blank"> </a>
</div>
以下是没有CSS参与的完整代码
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body ng-app='myapp'>
<div class="content" ng-controller='fetchCtrl' >
<div class="post" ng-repeat='post in posts'>
<h3 >{{ post.title }}</h3>
<iframe ng-click='setResponse()' width="560" height="315" ng-src="{{post.vid | trusted}}"
frameborder="0" allowfullscreen></iframe><br><br>
</div>
</div>
<!-- Script -->
<script src="angular.min.js"></script>
<script>
var fetch = angular.module('myapp', []);
fetch.controller('fetchCtrl', ['$scope', '$http', function ($scope, $http) {
$scope.getPosts = function(){
data =[
{"id":"1",
"title":"video 1",
"vid":"d0cmelmlrTI"},
{"id":"2",
"title":"video 2",
"vid":"ItCv7ZZvUX8"},
];
$scope.posts = data;
}
$scope.getPosts(); // Fetch post data
$scope.setResponse = function(){
alert('you click me');
}
}
]);
fetch.filter('trusted', ['$sce', function ($sce) {
return function(vid) {
var video_id1=vid;
return $sce.trustAsResourceUrl("https://www.youtube.com/embed/" + video_id1);
};
}]);
</script>
</body>
</html>
最佳答案
有no种方法可检测angularjs上下文中对iframe的点击，因为它已完全加载到应用程序上下文之外。
您可能需要查看在iframe上检测点击事件的jquery方式，或者仅将video元素与HTML5一起使用以显示视频。
关于css - AngularJS Click函数在youtube Iframe视频中不起作用，但在CSS中部分起作用，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/51229854/