My code lets people select youtube videos to show. The code is written in angular and I simply want to populate the iframe components with the angular variables. Here are some of the things I have tried and none of them work.
Produces Error
<div>
<iframe width="{{obj.content.videoWidth}}"
height="{{obj.content.videoHeight}}"
ng-src="{{obj.content.url}}"
frameborder="0"
allowfullscreen>
</iframe>
</div>
Does nothing
<div>
<iframe width="{{obj.content.videoWidth}}"
height="{{obj.content.videoHeight}}"
ng-src="obj.content.url"
frameborder="0"
allowfullscreen>
</iframe>
</div>
How do I make this work?
Related
I have place an iFrame tag in my Next.js component.
On my website I can see the frame but it says "Youtube does not authorize this connection".
What is wrong ?
Here is my code:
<iframe
src="https://www.youtube.com/watch?v=E8gmARGvPlI"
width="1920"
height="1080"
frameBorder="0"
allowFullScreen
uk-responsive
uk-video="automute: true">
</iframe>
If you want to play youtube videos in an iframe you need to do it using their APIs. You can learn more about how to do that here - https://developers.google.com/youtube/iframe_api_reference
If you simply want to embed the video with no external control over the video you can simply embed it. More about embedding here - https://support.google.com/youtube/answer/171780?hl=en
you get the video Id by using youtube api
<iframe
id="ytplayer"
className={}
type="text/html"
width="100%"
height="360"
src={`https://www.youtube.com/embed/${videoId}?autoplay=0&origin=http://example.com&controls=0&rel=1`}
frameborder="0"
></iframe>
Recently Google updated Chrome to allow autoplay on mobile devices if added to homescreen, however I can not get this to work.
https://www.chromium.org/audio-video/autoplay
<div class="plyr">
<div class="embed-responsive">
<iframe
src="https://www.youtube.com/embed/{{VIDEO_ID}}?autoplay=1&rel=0&showinfo=0"
allow="autoplay; encrypted-media"
width="100%"
webkitAllowFullScreen
mozallowfullscreen
allowFullScreen>
</iframe>
</div>
</div>
I've added the autoplay tag, but it's not autoplaying in my added to homescreen application.
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.
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>
My HTML page looks like this:
<div>
<iframe margin="0" padding="0" border="none" width="420" height="345" frameBorder="0"
ng-src="{{exercise_video_url}}">
</iframe>
</div>
'exercise_video_url' I am setting in my controller like following:
$http.get("https://localhost:8000/api/exercises/initial/").then(function(response){
$scope.initial_data=response.data;
angular.forEach($scope.initial_data, function(item){
$scope.exercise_type=item.exercise_type;
$scope.exercise_description=item.description;
$scope.exercise_video_url=$sce.trustAsResourceUrl(item.video_url);
})
I am fetching a particular exercise related information from my Django view, exercise model has a video_url as an attribute. I read somewhere and injected $sce service in my angular controller.
the video link itself looks like 'https://youtu.be/******' --> * are few random characters. This link works fine independently if you hit it in a browser or give as a source to ng-src directly.
I also tried commenting 'django.middleware.clickjacking.XFrameOptionsMiddleware' in my settings.py
Its your YouTube url your using, it needs to be the embed version. I just fixed similar issue on my site and worked.
Since your embedding it into an iframe it only makes since to use the YouTube embed url.
so example don't use the short url for embedding in iframes, use the embed url.
WRONG: <iframe width="1260" height="709" src="<iframe width="1260" height="709" src="https://www.youtube.com/watch?v=xWRNBOXoLf8" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
RIGHT: <iframe width="1260" height="709" src="<iframe width="1260" height="709" src="https://www.youtube.com/embed/xWRNBOXoLf8?ecver=1" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>" frameborder="0" allow="autoplay; encrypted-media" allowfullscreen></iframe>
Use https://www.youtube.com/embed/xWRNBOXoLf8?ecver=1