If I want to call a link into iframe with angular Js, I do this:
in HTML
<iframe width="560" height="315" ng-src="{{customUrl}}" frameborder="0" allowfullscreen></iframe>
In script
$scope.customUrl = $sce.trustAsResourceUrl('https://www.youtube.com/embed/ie06-rsfgio');
but what about if I want to make a ng-repeat with several iframes?
May I make something like this (obviously not this)?
$scope.videoList = [video: $scope.customUrl = $sce.trustAsResourceUrl('https://www.youtube.com/embed/ie06-rsfgio'),
video: $scope.customUrl = $sce.trustAsResourceUrl('https://www.youtube.com/embed/ie06-rsfgio'),
video: $scope.customUrl = $sce.trustAsResourceUrl('https://www.youtube.com/embed/ie06-rsfgio')
]
Try this: Works Well !! http://plnkr.co/edit/zf2YDyesNZXWwMrygNG1?p=preview
HTML:
<div ng-repeat = "src in sources track by $index">
<iframe width="560" height="315" ng-src="{{getTrust(src)}}" frameborder="0" allowfullscreen></iframe>
</div>
JS:
$scope.sources = ['https://www.youtube.com/embed/ie06-rsfgio',
'https://www.youtube.com/embed/ie06-rsfgio',
];
$scope.getTrust = function(src){
return $sce.trustAsResourceUrl(src);
};
Related
I am attempting to render Youtube videos along with content. The content renders however the embedded Youtube video is not. I read that I need to white list youtube for rending but I think my setup needs adjustment. My content comes through in a ng-repeat like such:
ng-bind-html=activity.content
Here is a song to listen to:
<iframe width="560" height="315" ng-src="https://www.youtube.com/embed/dcdgV0eYLSQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
template looks like such
<div class="activity" ng-bind-html="activity.content"></div>
I tried setting a whitelist url to the $sceDelegateProvider but I think I am missing a step. How do I make sure that youtube is accepted? It currently isn't.
app.config(function($sceDelegateProvider) {
$sceDelegateProvider.resourceUrlWhitelist([
'self',
'*://www.youtube.com/**'
]);
});
You can use a filter that returns the function to trust that resource.
.filter('trustAsResourceUrl', ['$sce', function($sce) {
return function(val) {
return $sce.trustAsResourceUrl(val);
};
}]);
And then apply it to your binding like this
<div class="activity">
<iframe ng-src="{{embed | trustAsResourceUrl}}" width="560" height="315" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
Working plunker
I want to bind iframe in a div that is returning by my database,
<iframe width="560" height="315" src="https://www.youtube.com/embed/zvo9m_e8ekA&; frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Is this possible to bind in following div
<div ng-app="myApp" ng-controller="dummy">
You will need to use the $sce service in conjunction with ng-bind-html in order to parse the string as safe HTML.
If your string is:
"<iframe width="560" height="315" src="https://www.youtube.com/embed/zvo9m_e8ekA&; frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>"
Then you need to replace the " with apostrophes and then parse it as safe HTML, as such:
dummy.unsafeIframeCode = "<iframe width="560" height="315" src="https://www.youtube.com/embed/zvo9m_e8ekA&; frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>";
dummy.unsafeParsedIframeCode = dummy.unsafeIframeCode.replace(/\"\;/gi, "'");
dummy.safeIframeCode = $sce.trustAsHtml(dummy.unsafeParsedIframeCode);
And simply bind it in HTML as such:
<div ng-app="myApp" ng-controller="dummy" ng-bind-html="dummy.safeIframeCode">
Full working JSFiddle here
ng-bind-html willn't work for binding your iFrame, because the sanitizer is protecting your app from potential XSS attacks.
If you trust/control the data source completely, you can look into using trustAsHtml
e.g. scope.trustedData = $sce.trustAsHtml(content); in your directive controller(where content is your iFrame "<iframe.../>"), and <div ng-bind-html="trustedData"></div> in the DOM. It'll do the task for you.
<li *ngFor="let post of posts ;let i = index ">
<div *ngIf="post.link != ''">
<iframe width="100%" height="315" frameborder="0" [src]="post.link">
</iframe>
</div>
</li>
The post.link is youtube Link or another website link,
if the post.link is without youtube link hide the iframe tag.
One option.
Give your posts an extra key eg: isYoutube(boolean)
So then you can edit your ngFor:
<iframe *ngIf="post.isYoutube" width="100%" height="315" frameborder="0" [src]="post.link"></iframe>
<a *ngIf="!post.isYoutube">{{post.link}}</a>
Maybe you're looking for something like :
HTML
<div *ngIf="isYoutube(post)">
<iframe width="100%" height="315" frameborder="0" [src]="post.link"></iframe>
</div>
Component
isYoutube(post: Post): boolean {
return post && post.link && -1 < post.link.indexOf('youtu');
}
You can check that link for a post doesn't contain "youtube.com" with
*ngIf="post.link.indexOf('youtube.com') != -1"
i have a div which contains iframe datas such as
<div class="video-container" ng-bind-html="trustedContentSce(value.content)" class="item"></div>
<p ng-bind-html="value.content"></p>
and in controller
$scope.trustedContentSce=function(value){
return $sce.trustAsHtml(value)
};
and also included following in app.config
$sceDelegateProvider.resourceUrlWhitelist(['self', new RegExp('^(http[s]?):\/\/(w{3}.)?youtube\.com/.+$')]);
I Receive data in value.content as
<iframe width="560" height="315" src="https://www.youtube.com/embed/lGP1YFE5s4M" frameborder="0" allowfullscreen></iframe>
and while posting through my app
<iframe width="560" height="315" src="https://www.youtube.com/embed/fk4BbF7B29w" frameborder="0" allowfullscreen></iframe>
which is pretty much same. isn't it?
Here is screen shot of problem i am facing (above video is posted from app and one below is posted from web
I still don't have an answer but i found a workAround. Before I used Text editor in php but when i use textarea it worked. don't know why ? isn't this:
<iframe width="560" height="315" src="https://www.youtube.com/embed/lGP1YFE5s4M" frameborder="0" allowfullscreen></iframe>
and this considered same when used ng-bind-html :
<iframe width="560" height="315" src="https://www.youtube.com/embed/fk4BbF7B29w" frameborder="0" allowfullscreen></iframe>
I have a few HTML Home Page Custom Components titled Custom_News, Custom_Articles, and CUstom_Cases.
Here's the HTML for them:
<iframe src="/apex/NewsPage?id=a1TW0000000EJAL" frameborder="0" width="100%"></iframe>
<iframe src="/apex/Custom_Home" frameborder="0" width="100%"></iframe>
<iframe src="/apex/CasesPage" width="100%" frameborder="0"></iframe>
This is what my Customer Portal Home Page layout looks like:
and this is what the Custom Components look like when I login to the Customer Portal:
How do I get rid of the scroll bars? I want the Customer Portal to auto adjust to the size of the components so that none of the components will have scroll bars. How do I do this?
You could try modifying the height of the iframes dynamically with JavaScript. This answer explains how to accomplish this.
Here's an example using the JavaScript provided:
<script language="JavaScript">
<!--
function autoResize(id){
var newheight;
var newwidth;
if(document.getElementById(id)){
newheight = document.getElementById(id).contentWindow.document.body.scrollHeight;
newwidth = document.getElementById(id).contentWindow.document.body.scrollWidth;
}
document.getElementById(id).height = (newheight) + "px";
document.getElementById(id).width = (newwidth) + "px";
}
//-->
</script>
<iframe src="/apex/NewsPage?id=a1TW0000000EJAL" frameborder="0" width="100%" onLoad="autoResize('iframe1');"></iframe>
<iframe src="/apex/Custom_Home" frameborder="0" width="100%" onLoad="autoResize('iframe1');"></iframe>
<iframe src="/apex/CasesPage" width="100%" frameborder="0" onLoad="autoResize('iframe1');"></iframe>
This is what I ended up doing:
<script language="JavaScript">
function resizeIframe(newHeight, id){
document.getElementById(id).style.height = parseInt(newHeight,10) + 'px';
}
</script>
<iframe id="iframe2" src="/apex/NewsPage?id=a1TW0000000EJAL" frameborder="0" ="" onload="parent.resizeIframe(1.5*document.body.clientHeight,'iframe2');" height="100%" width="100%"></iframe>