brandly / angular-youtube-embed Goto Github PK

See above

Hi,
First of all, very nice directive! Good job!

Sometimes, I get error "Failed to execute 'postMessage' on 'DOMWindow': The target origin provided ('https://www.youtube.com') does not match the recipient window's origin ..."

How can I solve it?

Thanks

Firefox version 37.0.2

www.youtube.com/iframe_api script included in HEAD
angular-youtube-embed.min.js and other scripts are included at the end of BODY

Hi matt,

I really like your angular youtube player directive!
I am relatively new to angular. I dont really know if it is a bug or whatever.

I realised that the following function produces an infinite $digest loop:

            function applyBroadcast () {
                var args = Array.prototype.slice.call(arguments);
                scope.$apply(function () {
                    scope.$emit.apply(scope, args);
                });
            }

Do you know a way to fix this issue?

When passing player vars

$scope.playerVars = {
        controls: 1,
        autoplay: 1
    };

The video does not auto play on chrome in android. It works on desktop though.

Though this may be a limit of chrome in android.

can we set width and height of the embedded videos

Hi,
I got a problem when I try to list some video from ng-repeat, here is the code
video-url="'{{video.url}}'"
I checked the compiled page, I found it didn't parse url for src code, so do you have any idea how to solve it.

Thanks
Peter

i tried below but it throws errors:

in html:

<youtube-video video-id="'sMKoNBRZM1M'" player="bestPlayer"></youtube-video>

in my controller:

$scope.bestPlayer.playVideo();

imagine:

$scope.urls = [ 'url-1', 'url-2' ]; 

-----------------

<div ng-repeat="url in urls">
    <youtube-video video-url="{{ url }}">

I've just tried to change theBestVideo variable but no effect on it.

If I embed video to a view - the video appears only after i manually refresh the page (press F5).

You're currently destroying the player and calling createPlayer every time the video id (or url/play list) is being changed. I think YouTube just updated their API's to stop this as my site started breaking.

Not sure if there are other use cases that might break this, but my current work around is to modify your loadPlayer function to check if the player exists, and instead of creating a new one, use player.loadVideoById to update the id. There are similar calls for load by url and for playlists.

src: https://developers.google.com/youtube/iframe_api_reference#loadVideoById

Hi there,

If the youtube directive is removed via ng-if and then reintroduced later to play something, it errors out. The error I get is the following:

TypeError: Cannot read property 'id' of null
at O.g.destroy (https://s.ytimg.com/yts/jsbin/www-widgetapi-vfle2r0X0/www-widgetapi.js:21:28)
at loadPlayer (http://localhost:3000/lib/angular-youtube-mb/src/angular-youtube-embed.js:193:38)
at Object. (http://localhost:3000/lib/angular-youtube-mb/src/angular-youtube-embed.js:224:33)
at Object.applyFunction as fn
at Scope.$digest (http://localhost:3000/lib/angular/angular.js:12512:29)
at Scope.$delegate.proto.$digest (:844:31)
at Scope.$apply (http://localhost:3000/lib/angular/angular.js:12777:24)
at Scope.$delegate.proto.$apply (:855:30)
at HTMLButtonElement. (http://localhost:3000/lib/angular-touch/angular touch.js:440:13)
at HTMLButtonElement.n.event.dispatch (http://code.jquery.com/jquery-2.1.1.min.js:3:6404)

Thanks for making the ng-if changes so far!

width and height are currently hardcoded

This may not be related to your plugin, but perhaps you know a solution.

When having the phone muted on iOS (hardware button) the audio of a video in a PhoneGap app is not being played. When opening a video in the Youtube app or in mobile Safari, the audio is playing.

Thanks for the great directive. I'm building an app that will load a new video when the current video ends. If I'm watching a video in fullscreen on a desktop, the fullscreen is exited when the next video is played. This is the behavior on Chrome, Firefox, and IE from what I've tested.

Any idea how to keep the player in fullscreen so its a continuous fullscreen experience? I've got my own internal playlist system, so I'd rather not make use of YouTube's playlist system.

Here's my setup:

app.html

<div class="embed-responsive embed-responsive-16by9">
  <youtube-video class="embed-responsive-item" video-id="myVideo" player-vars="playerVars">  </youtube-video>
</div>

app.js

scope.playerVars = {
  modestbranding: 1,
  autohide: 1,
  showinfo: 0,
  controls: 1,
  // note: autoplay does not work on most mobile browsers
  autoplay: 1,
  fs: 1,
  allowfullscreen: 1
};

scope.$on('youtube.player.ended', function (event, player) {
  scope.playNext();
});

scope.playNext = function() {
  scope.myVideo = scope.next_youtube_video_id;                                              
}

This is probably more of a general youtube API or browser question, but figured you all would have some ideas.

I have several posters that, when clicked, replace themselves with a youtube-video directives. It uses an ng-if to prevent any unnecessary player initialization on page load. The problem is, the player attribute remains undefined once the ng-if condition becomes true and is digested.

<youtube-video video-id="..." player="player" ng-if="started">

The player attribute is good for very precise control from the controller. However, it would be nice to be able to declaratively control the state of the player via attributes. This way, template expressions can toggle playback:

<youtube-video playing="x + y > 10">
<youtube-video playing="playback">

Additionally, playhead position could be two-way bound to get and set playback position.

<youtube-video position="pos">

not sure from where the issue is coming from.
the strange thing is that there's no error in Firefox & Safari but only in Chrome (v39) - and the video doesn't load.

Your demo does works on Chrome, so I'm guessing something in the code bothering it, I'm just not sure from where to start, because the error points only to Angular

TypeError: Cannot read property 'childNodes' of undefined
    at g (http://domain.com/js/angular.min.js:51:321)
    at g (http://domain.com/js/angular.min.js:51:316)
    at g (http://domain.com/js/angular.min.js:51:316)
    at http://domain.com/js/angular.min.js:50:414
    at http://domain.com/js/angular.min.js:18:8
    at k.$eval (http://domain.com/js/angular.min.js:124:325)
    at k.$apply (http://domain.com/js/angular.min.js:125:6)
    at http://domain.com/js/angular.min.js:17:479
    at Object.e [as invoke] (http://domain.com/js/angular.min.js:36:365)
    at d (http://domain.com/js/angular.min.js:17:400)

When I remove the <youtube tag - the error goes away.
I'm also using ng-facebook, so I'm using Angular 1.2.27

Just wanted to know if you have something in mind, it will take me a while to debug it...

I use external button to play video and it works well on all desktop browsers (safari, chrome, firefox), and it works on mobile firefox. Here's a jsfiddle: http://jsfiddle.net/saczk32v/15/

it doesn't work very well on mobile chrome of my Android device. when using the button with ng-click="player1.playVideo()", it has to click the button at least twice to play video.

when inspecting the player object, the currentState property value becomes buffering when running player.playVideo() for the first time, when run it again, the video plays.

Is there anything special for mobile chrome?

same video, same network environment, the one with youtube directive loads/buffers so much longer than window.open("https://www.youtube.com/embed/xxx");
the youtube directive takes 2-3 mins buffering time while at the same time the same video in my same app plays immediately using window.open, i tried different orders with different videos, still behave the same.

Could you explain why we expose player to scope in youtubeDirective?

Nothing happens using:

<youtube-video video-id="sMKoNBRZM1M"></youtube-video>

and using video-url occurs an error

<youtube-video video-url="anotherGoodOne"></youtube-video>

Looks like latest on NPM is 1.0.3.

Could you please push 1.1.0 to NPM?

Thanks, Alex

But trying to do so I get

Syntax Error: Token 'undefined' not a primary expression at column null of the expression [100%] starting at [100%].

I currently have a YouTubeCtrl controller
And the player controllers are on a different part of the screen, so I couldn't use the same ng-controller
so I created a new controller, something like YouTubeSideCtrl
But how do I control it from there ?

This doesn't work:

<span ng-click="MainYouTube.playVideo()"> play button </span>

Obviously ...

Any idea ?

the ui-router configuration:

$stateProvider.state("a")
$stateProvider.state("b") //abstract
$stateProvider.state("b.c")

if state transition from "b.c" to "a" then it will causing the error

TypeError: Cannot read property 'id' of null at O.g.destroy (https://s.ytimg.com/yts/jsbin/www-widgetapi-vflfilDmc/www-widgetapi.js:21:28)

after this error, if I continue to change(or refill) the video-id then

TypeError: Cannot read property 'src' of null at O.g.J (https://s.ytimg.com/yts/jsbin/www-widgetapi-vflfilDmc/www-widgetapi.js:26:91)

Any ideas?

Package doesn't work with webpack.
On build it throws

WARNING in ./~/angular-youtube-embed/src/angular-youtube-embed.js
Critical dependencies:
1:16-23 require function is used in a way in which dependencies cannot be statically extracted

I have a json file where I save my videos when I execute a ng-repeat I'd which each one of his videos have a different scope of player-vars. Is that possible?

Json files :
[
{
"id": "0",
"title": "Lorem ipsum torem tapusm ipsum",
"date": "19 juillet 2015",
"videosUrl": "zFXpNT-Tse0",
"startTimes": "40",
"endTimes": "45",
"herosId": "5",
"likes": "45",
"comments" : "384"
},
{
"id": "1",
"title": "Lorem ipsum torem tapusm ipsum",
"date": "19 juillet 2015",
"videosUrl": "zFXpNT-Tse0",
"startTimes": "5",
"endTimes": "10",
"herosId": "5",
"likes": "45",
"comments" : "384"
}
]

I've tried to concatenate video-id with a variable that contains the string "?rel=0" so as to turn off the related videos (e.g. "http://youtube.com/embed/NVl_IFepdLQ?rel=0") , but "?enablejsapi=1&origin=http%3A%2F%2Flocalhost%3A3000" gets appended to the url causing the related videos to fire. Is there another way to turn off the related videos?

Hi! Thanks a lot for the great project, wondering if you have any plans of including the playlists support?

Given this scenario:

• Player is complety loaded (100% of the video is already loaded)
• Player is in state "playing" (it already fired that event some time ago)

If the user clicks in the timeline (eg: in the middle, or 3/4 of it), the player will skip to that part without firing any events (no buffering because its already buffered, not playing because it is already playing).

How can I detect this situation?
Is "watching" the only way?

https://github.com/brandly/angular-youtube-embed/blob/master/src/angular-youtube-embed.js#L190

Checks if player has non-existent property 'd' before destroying and re-adding player. Thus, the player is never re-added.

function loadPlayer () {
                if (scope.videoId || scope.playerVars.list) {
                    if (scope.player && scope.player.d &&
                        typeof scope.player.destroy === 'function') {
                        scope.player.destroy();
                    }

                    scope.player = createPlayer();
                }
            };

Hi there, would you be interested in merging a timeupdate pseudo-event implementation based on setInterval? This is a big gap when compared to most HTML5 video players out there.

Hi,
Your Library looks very nice, but it renders thinks like this:

Which does not work.

ADD:
If I use the video-url strategy, everything works perfectly!

It would be perfect without the "amp;" string beeing added everywhere. Do you have an idea about what I did wrong?

here is the corresponding html:

<div ng-controller="YouTubeCtrl">
  <youtube-video video-id="theBestVideo"></youtube-video>
</div>

and here is the controller:

angular.module('my_app').controller('YouTubeCtrl', function ($scope) {
  // have a video id
  $scope.theBestVideo = 'yxki-YmJyyw';
});

If I make a homescreen bookmark from the webapp (which will open my app in a borderless web window) when the video is loaded, it spawns the youtube app to play it.

this is related.

If I manually make an embed that looks like this, using $sce.trustAsResourceUrl($scope.videoURL), it works:

<iframe width="100%" height="300" src="{{videoURL}}" frameborder="0" allowfullscreen></iframe>

but I must use https://www.youtube-nocookie.com/embed/VIDEOID and I don't get any of the event callbacks.

to reproduce:

• visit this demo on an iOS device
• Add to home screen (under the bookmark menu)
• open link from homescreen

Maybe there isn't a fix, but it seems like it should work if the youtube iframe API allows -nocookie domain.

TypeError: Cannot read property 'ready' of null

Hello,

I tried to use the module inside a chrome extension using angular and got this error:
"Error: Invalid isolate scope definition for directive youtubeVideo: =? at Error (native)"

Also, "Refused to load the script 'https://www.youtube.com/iframe_api' because it violates the following Content Security Policy directive: "script-src 'self' chrome-extension-resource:" gets printed, but not sure if it is related.

Any idea ?

Is there a way to get the current player
Like in the method
player.getCurrentTime()

Is there any way to make the embedded video responsive?

The video is much too wide on mobile.

http://embedresponsively.com/ for instance has css code for it.

http://stackoverflow.com/questions/29472808/cant-pass-angular-youtube-embed-player-to-factory

I make custom controller and want to add method fullscreen video in my fullscreen button. How can I make method to full screen it ? Thanks a lot.

I am still getting error on script.js 1 line

var app = angular.module('myApp', ['ngRoute','youtube-embed']);

app.controller('ServicesCtrl',['$scope', function($scope){
  $scope.theBestVideo = 'sMKoNBRZM1M';
}]);

services.html

<div class="row">
  <div class="col-lg-12">
    <h2>Services</h2>


    <youtube-video video-id="theBestVideo"></youtube-video>
</div>
</div>

index.html

  <script src="https://www.youtube.com/iframe_api"></script>
    <script src="angular-youtube-embed.js"></script>

Does anybody have any idea how to solve this?

Hey Brandly, I had this directive working without any issue in a different project (which is why I stuck with it through this incredibly difficult bug to find).

Basically, I tried to use the youtube-video directive on the index.html (served right away) and it kills all directives on the page and throws this exception:

TypeError: Cannot read property 'nodeName' of undefined
at Function.jQuery.acceptData (http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js:3618:35)
at internalData (http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js:3682:15)
at Function.jQuery.extend.data (http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.js:3878:10)
at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js:6052:22)
at nodeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js:6670:24)
at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js:6070:13)
at compositeLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js:6073:13)
at publicLinkFn (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js:5966:30)
at http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js:1440:27
at Scope.$eval (http://ajax.googleapis.com/ajax/libs/angularjs/1.2.21/angular.js:12632:28) 

I went into the angular-youtube-embed source code and discovered that issue is in this block of code:

(function () {
    var validProtocols = ['http:', 'https:'];
    var url = '//www.youtube.com/iframe_api';

    // We'd prefer a protocol relative url, but let's
    // fallback to `http:` for invalid protocols
    if (validProtocols.indexOf(window.location.protocol) < 0) {
        url = 'http:' + url;
    }
    var tag = document.createElement('script');
    tag.src = url;
    var firstScriptTag = document.getElementsByTagName('script')[0];
    firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
}());

If you put this code into a setTimeout, however, all the issues go away.

So I crafted a directive to fix this issue as a temporary workaround for myself:

.directive('video', ['$timeout', '$compile', function($timeout, $compile) {
  return {
    template: '',
    link: function(scope, elem, attr) {
      // HACK: for some reason the youtube directive causes an error 'undefined doesn't have property nodeName' or something
      // unless we put it in a timeout and it doesn't run during the angular bootstrap.
      $timeout(function() {
        elem.append('<div youtube-video class="embed-responsive-item" video-id="videoId" player-height="360" player-width="640"></div>');
        $compile(elem.contents())(scope);
      });
    }
  };
}]); 

I'm using it and sice i inserted in my webapp i got this error:
GET chrome-extension://boadgeojelhgndaghljhdicfkmllpafd/cast_sender.js

It appears a couple of times and i've included both files, youtube and the directive, just like the example. I'm using a video-url with AngularJs 1.4.3.

What may be wrong?

_index_

<!-- Youtube -->
<script src="https://www.youtube.com/iframe_api"></script>
<script type="text/javascript" src="dist/lib/ngYoutube.min.js"></script>

_html_

<div class="embed-responsive embed-responsive-16by9">
    <youtube-video class="embed-responsive-item" video-url="lookVideo"></youtube-video>
</div>

_ctrl_

$scope.lookVideo = 'https://www.youtube.com/watch?v=[myvideocode]'; //I'm using a correct url, but i changed because of client restrictions

Edit: Everything is working fine. But i have this error showing up a couple of times, and only in the page where the video appears.

Add option to hide video controls

Using this directive multiple times on one page does not work. Only the last usage functions.

version 5.1.7.but working on 7.0.6