Giter Site home page Giter Site logo

videojs-youtube's Introduction

YouTube Playback Technology
for Video.js

Greenkeeper badge

Install

You can use bower (bower install videojs-youtube), npm (npm install videojs-youtube) or the source and build it using npm run build. Then, the only file you need is dist/Youtube.min.js.

Version Note

Use branch vjs4 if you still using old VideoJS v4.x.

Example

<!DOCTYPE html>
<html>
<head>
  <link type="text/css" rel="stylesheet" href="../node_modules/video.js/dist/video-js.min.css" />
</head>
<body>
  <video
    id="vid1"
    class="video-js vjs-default-skin"
    controls
    autoplay
    width="640" height="264"
    data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}] }'
  >
  </video>

  <script src="../node_modules/video.js/dist/video.min.js"></script>
  <script src="../dist/Youtube.min.js"></script>
</body>
</html>

See the examples folder for more

How does it work?

Including the script Youtube.min.js will add the YouTube as a tech. You just have to add it to your techOrder option. Then, you add the option src with your YouTube URL.

It supports:

Options

It supports every regular Video.js options. Additionally, you can change any YouTube parameter. Here is an example of setting the iv_load_policy parameter to 1.

<video
  id="vid1"
  class="video-js vjs-default-skin"
  controls
  autoplay
  width="640" height="264"
  data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}], "youtube": { "iv_load_policy": 1 } }'
>
</video>

YouTube controls

Because controls is already a Video.js option, to use the YouTube controls, you must set the ytControls parameter.

<video
  id="vid1"
  class="video-js vjs-default-skin"
  controls
  autoplay
  width="640" height="264"
  data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}], "youtube": { "ytControls": 2 } }'
>
</video>

Custom Player Options

If you need to set any additional options on the YouTube player, you may do so with the customVars parameter:

<video
  id="vid1"
  class="video-js vjs-default-skin"
  controls
  autoplay
  width="640" height="264"
  data-setup='{ "techOrder": ["youtube"], "sources": [{ "type": "video/youtube", "src": "https://www.youtube.com/watch?v=xjS6SftYQaQ"}], "youtube": { "customVars": { "wmode": "transparent" } } }'
>
</video>

Special Thank You

Thanks to Steve Heffernan for the amazing Video.js and to John Hurliman for the original version of the YouTube tech

License

The MIT License (MIT)

Copyright (c) Benoit Tremblay [email protected] and videojs-youtube contributors

Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software.

THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

videojs-youtube's People

Contributors

0xsven avatar ange007 avatar apptv avatar da1nonly avatar danielcebrian avatar danielhudson avatar dbettini avatar dcharbonnier avatar ddaf avatar dennisss avatar designorant avatar dirkjanm avatar dominic-p avatar exon avatar gkatsev avatar greenkeeper[bot] avatar marco129 avatar marcreynolds avatar martindale avatar mattiasbuelens avatar mattporritt avatar misteroneill avatar moay avatar neiltron avatar owenedwards avatar passkey1510 avatar robinnorth avatar ryanand26 avatar sanketj14 avatar slobo avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

videojs-youtube's Issues

Getting multiple iframes when switching from HTML5 tech to YouTube tech and back again

Howdy!

I first reported this on the video.js issues list, but they suggested that it might make more sense here.

I've put some demo code into jsbin here:

http://jsbin.com/ocOrogAT/3/edit?html

I inlined the source of the videojs-youtube plugin.

The output can be seen here: http://jsbin.com/ocOrogAT/3

It continually cycles through two videos: a 5 second MP4 clip, then a 10
second YouTube clip.

Here's the behavior I see:

  1. The MP4 loads and plays in a
  2. When the MP4 finishes, the
  3. When the YouTube clip finishes, the <iframe> stays in place.
  4. The MP4 video is loaded, but the
  5. When the MP4 finishes, a second <iframe> tag is added to the DOM which
    plays the YouTube clip.
  6. GOTO 3

It seems that the YouTube tech should either reuse the iframe or clean up the iframe after it is used.

I'm not sure if the

Let me know if you have questions, etc.

MK

Updating from 4.1.0 to 4.2.2

Hi, I was wondering if you have the youtube plugin working with the latest videojs 4.2.2. I have it working with 4.1.0. With 4.2.2, it seems to work in the desktop browser, however on iPhone and android, the spinner just shows up after you click play.

Youtube plug-in error

If I load a video to a player from youtube using javascript, I am not able to add a local mp4 video,.. it seems the video is loaded and playing, but the youtube video is not hiding and it is there.....

in IE 8, the plug-in is throwing attacheventlistener not available error...

Control Bar Fails to Reappear after Full Screen Change

A pretty minor issue, but here are the steps:

  1. Start playing a YouTube video
  2. Go to full screen
  3. Exit full screen
  4. Move your mouse into and out of video (allow controls to fade out)
  5. Controls don't fade back in when you move mouse over video again

Maybe this is just me, but it seems to be pretty consistent. I don't see any js errors show in my console.

Can't play the youtube video via ajax

Hi,
I develop as site to show the yoututbe video.
In my php script I tried to load a div via ajax as below

And when completed calling ajax. I tri to add src youtube link to play as below:
V.players = {} ;
V("vid1", {
"techOrder": ["youtube"],
"src": "http://www.youtube.com/watch?v=LKRIFj-RF3M"
}, function(){
// Player (this) is initialized and ready.

                });

But I always get the error on both chrome and firefox.
In firefox I can see NS_ERROR_XPC_BAD_CONVERT_JS: Could not convert JavaScript argument arg 1 [nsIDOMEventTarget.removeEventListener]

window.location.origin is Webkit and Gecko only

window.location.origin is not supported in IE and Opera. This leads to the following problemen: when the video is started, the poster and some other buttons aren't hidden, with the result that you can't see that the video is playing.

Suggestion:

replace window.location.origin with window.location.protocol + '//' + window.location.hostname

Release for v 1.1?

Hi would love to get a release with version 1.1 of vjs-youtube with crossbrowser support.

cancelFullScreen in ios (iphone) not working

I just made cancelFullScreen to work with videojs (needed to use .dev with it [fix]) but when I tried it with a player made with this it wouldn't close the fullScreen and it seems to brake because the remaining scripts didn't work as well.

Is there a different command to exit full screen if player was using this?

responsiveness

Is there anyway to make video.js with youtube videos embedded responsive, as for example and preferrably with the css-solution?

.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;
}

.video-container iframe,
.video-container object,
.video-container embed
.video-container video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

That would be great... and needed today!

Thanks for ideas!

Video Error with specific youtube video

I tried the barebones example and change the youtube URL to this: http://www.youtube.com/watch?v=glii-kazad8

Other youtube URLs seem to work. This URL doesn't seem to working in older versions of videojs+youtubeplugin..

When you click play, it gives the following error in the console log:

["Video Error", Object]
0: "Video Error"
1: Object
isDefaultPrevented: function returnFalse() { return false; }
isImmediatePropagationStopped: function returnFalse() { return false; }
isPropagationStopped: function returnFalse() { return false; }
arguments: null
caller: null
length: 0
name: "returnFalse"
prototype: returnFalse
proto: function Empty() {}

preventDefault: function () {
relatedTarget: undefined
stopImmediatePropagation: function () {
stopPropagation: function () {
target: div#vid1.video-js.vjs-default-skin.vjs-paused.vjs-youtube.vjs-controls-enabled.vjs-user-inactive
type: "error"
which: undefined
proto: Object
length: 2
proto: Array[0]

supportsFullScreen not implemented

According to https://github.com/videojs/video.js/blob/master/docs/tech.md, it is required to implement the method supportsFullScreen. In the current version of the script, this is not the case. That is why Opera and IE throw an error when trying to access full screen.

As far as I understand, this method is only used when browsers do not support fullscreen display natively to handle fullscreen display in special playback technologies. If it returns false, the viewport is resized to maximum. This is the desired result. However, the script currently throws an error when it tries to access the method supportsFullScreen() in Opera and IE, because the method isn't implemented. I suggest to add the following code somewhere between the other functions:

videojs.Youtube.prototype.supportsFullScreen = function(args){
return false;
};

moblie (start ->stop->start => sound is not )

Here is 3 examples:

  1. using autoplay/loop/muted
  2. using YouTube controls
  3. using JavaScript events

i use 2,3

I 've tested!! (galaxy3 )

had to touch the screen!!!! or touch Pause botton
-->stop

and started again !!!!!!!
Sound is not!!!
stop->start ->stop ->start=>result (not sounds)

Removed from memory!!(android borwer)

and restart ---> sounds!!

I am baby english... please understand ^__^:

Firefox support

Hi, can't get this to work in firefox (20.0).

The console does not output any useful, howerver firefox says it need some plugin, but when i try the "Install missing plugins"-button it cant identify whats missing.

The error occured on your /example file on a fresh clone.

Safari 7 on Mavericks broken?

After searching the issues and seeing #23 I was hoping the latest commits would fix my issue.

It seems that Safari 7.0.1 (Mavericks) is not playing YouTube videos - due to crossdomain. I have a Mac still on OS 10.8 and using Safari 6.1.1 the video does play as it used to.

On my recently updated dev machine to Mavericks 10.9.1 I'm getting the spinning swirl with a js error of

[Error] Blocked a frame with origin "https://www.youtube.com" from accessing a frame with origin "https://www.filemakermagazine.com". Protocols, domains, and ports must match.

Can someone with Safari 7.0.1 verify it's not just my machine or setup? The video is here.

http://www.filemakermagazine.com/13

Dispose() exceeding call stack

Currently implementing an AngularJS site to show youtube videos.
When the route is hit to load the video, the template HTML:

<video id="currentVideo" class="video-js vjs-default-skin" controls preload="auto" autoplay="autoplay" width="640" height="360"></video>

gets injected and then a directive is called:

if(myPlayer) {
    myPlayer.dispose();// This causes stack exceed issues.
}
myPlayer = videojs('currentVideo', { "techOrder": ["youtube"], "src": "http://www.youtube.com/watch?v="+$scope.videoID });

The problem lies when the old video is "disposed".
When the player is called the first time it loads just fine. However, without refreshing, we transition to an old route (go back) and then either pick a new video or go forward to the old video, the Chrome console starts going crazy:
Console

The video screenshot will display and the sound will start but the video will not play. And then on the third time of loading the video (going back and then forward one more time), the video and audio fail to load all together.

Any idea on either what I'm doing wrong or maybe where this is coming from?

Thanks

Edit: Using Video.js 4.3.0, when testing with 4.1, I was able to get the video(and audio) loaded the first and second times, but then it broke on the third one.

Error: The "src" method is not available on the playback technology's API

I'm trying to change the video source programmatically using videojs method src(). This works fine for mp4 files, but results in a error for youtube files.

As stated in https://github.com/videojs/video.js/blob/v4.3.0/docs/guides/tech.md method src() must not be supported by a tech api. So what is the best way to change the youtube source on the fly?

Thank for your help!

Update:
Having a closer look at this it turned that the error cause was a version mismatch between videojs and the plugin. In fact videojs-youtube works like a charm: http://experiments.saschaseewald.com/motion/

Thanks for the good work!

Youtube videos fail to play

Hi,

I cloned the project and tried the example with a simple python server. The video shows up correctly, but somehow when I pressed the play button nothing happened, and the following error message showed up in the console:

Blocked a frame with origin "http://www.youtube.com" from accessing a frame with origin "http://127.0.0.1:8000". Protocols, domains, and ports must match. www-embed-player-vflTP1ltD.js:217

Please help me to get this working. Thanks

Does not handle calls to .src(src)

Hi Exon,

Great work getting this going. I tried the example, and it worked great. Then I tried to play videos via the .src() call to videojs. e.g.

video.src({type: 'video/youtube', src: 'http://www.youtube.com/watch?v=xjS6SftYQaQ'}

Which doesnt work, because there is no .src() function to handle that. I have created a fix for this which works, but doesnt yet handle the case where the video src is specified in the html. So I need to re-apply some of the original code before it's merge ready. I also moved a few things around to factor-out the regexing the of the IDs from the init. If you have time to jump on IRC at some point we could figure how best to merge it back.

tom

Font Icons replaced with squares

after including the plugin's js, everything worked really well, except that all icons like play/pause, volume and all got replaced with a square :(

screen shot 2013-08-27 at 18 01 06

IE 8 js errors

It looks like the most recent commit fixed some cross-browser issues, but not all.

screen shot 2014-01-02 at 1 31 30 pm

doesn't work with iphone + chrome or iphone+safari

I have upgraded to the latest plugin with vjs 4.3. It seems to work now on my regular mac with chrome and firefox, however when you test with iphone or android device, after you click the play button, the spinner just gets stuck and video doesn't play. I tested with the example provided with the plugin. Are you able to view the video from a mobile device?

Error: Permission denied to access property 'toString'

I am able to view the example file if I view locally. But as soon as I try to view from my servers both MAMP and a hosted environment I get the error:

Error: Permission denied to access property 'toString'
the error references this file www-embed-vfl7bGmtP.js on line 87

and the video will not play.

Locally I still get the error but the video plays anyway.

any help is greatly appreciated.

Progress bar not working

Hi,
I just cloned the repo and tried to run the demo under example/index.html.

When Videojs controls are used, the progress bar doesn't update when the video is playing and it's stuck at the beginning. When I click to seek forward, it just restarts the video at the beginning.

Also, the duration label shows "0:00" which is not accurate. See screenshot below:
example index

I tested this on Chrome, Firefox and Safari, on Max OSX.

Is it a bug, or did I miss anything?
Thanks!

videojs-youtube api doesn't work on IOS

I have tried to play a youtube video using the videojs api. This works on Windows Phone 8 and all desktop web browsers but not on IOS.When pressing play it shortly shows a glimps of the video and next the loader shows. I've used the latest files from Github. Both for videojs and videojs-youtube. Am I doing something wrong or is there a bug somewhere in videojs?

Here is the link to my test page:
http://www.lss-dk.com/videojs3.html

Hit the play-link to test.

Tag and bower

Hi,
Could you please tag each release?
And if possible, add bower-compatibility ;)

video thumbnails

hi thanks for the youtube playlist, i was wondering would it be possible to merge the youtube support code to https://github.com/cfx/videojs-playlist or be able to display playlist thumbnails so that if a user clicks on the image to loads the video.

note if you download the code and rename dev.html.example to dev.html you can see a working example.

Switching quality

Hey,

Is there any plugin to switch the quality?

Is it possible via the API?

Best,

Nils

Poster overwritten on init()

If the video tag has already specified a poster or if the player has a posterImage specified, the plugin shouldn't overwrite the poster.

Would also be great if the poster creation happened in its own function outside of init, to make the behavior more customizeable.

Needing to do some hackish on-initialization-magic to reset the poster right now: http://jsfiddle.net/82yFj/5/

can't control video via JS on Ipad

I'm using videojs-youtube, and while I can get the video player to display in youtube, if I try to control it programattically the player breaks (goes black) on ipad.

I have created a simple test to just play the video on load. When this executes on ipad, the player turns black, no video or controls are available. I don't see any errors when debugging the ipad w/safari on my connected mac.

<!DOCTYPE html>
<html>
<head>
    <link href="http://vjs.zencdn.net/4.3/video-js.css" rel="stylesheet">
</head>
<body>
  <video id="vid3" src="" class="video-js vjs-default-skin" controls preload="auto" width="640" height="360">
  </video>

  <script src="js/vendor/video.dev.js"></script>
  <script src="js/vendor/vjs.youtube.js"></script>
  <script>
  videojs('vid3', { "techOrder": ["youtube"],  "src": "http://www.youtube.com/watch?v=xjS6SftYQaQ" }).ready(function() {
      this.play();
  });
  </script>
</body>
</html>

Subtitles not working

Steps to reproduce:

  • Open example/index.html
  • Add to the video tag
  • Open the page in your browser and enable the subtitle
  • Nothing happens! :(

I've tested this in the current versions of Opera, Firefox and Chrome.

EDIT: Appears you need to host your files on a server instead of just opening your files from disk in your browser.

Doesn't seem to be starting muted

I have muted in the video tag and also in the options object, no sign of the youtube starting muted. Is there a quick fix for this?

Video controls hidden in iOS6 (Safari iOS 5.1)

When watching a video in iOS6 youtube hijacks the videojs overlays and tries to display it's own. First noticed by seeing the big red youtube play button instead of a custom theme and lack of controls when playing the video.

My configuration of videojs is:

<video id="video-id" class="col st-pos-1 st-wid-6 video-js vjs-default-skin" 
   controls preload="auto" width="576" height="344" poster="../content/posterframe.gif" 
   data-setup='{"autoplay": false, "preload": "none" ,"techOrder": ["youtube"], 
   "src": "http://www.youtube.com/watch?v=_N6hD9vRd_g"}'>
</video>

Looking at the error console between Safari 6.0.5 and Safari iOS 5.1 there is only one line difference.

With Safari 6.0.5 I get an unsafe JS access, as noted below, but with Safari iOS 5.1 this error doesn't happen.

Unsafe JavaScript attempt to access frame with URL http://www.powershop.co.nz/ from frame with URL http://www.youtube.com/embed/_N6hD9vRd_g?enablejsapi=1&iv_load_policy=3&playerapiid=what-is-powershop-vid_component_4&disablekb=1&wmode=transparent&controls=0&showinfo=0&modestbranding=1&rel=0&autoplay=0&loop=0&origin=http%3A%2F%2Fwww.powershop.co.nz. Domains, protocols and ports must match.

Could it be that Safari iOS allows cross-domain scripting in this situation, which in turn allows YouTube to take over the controls?

... just a theory.

There is a closed issue in videojs: videojs/video.js#242

Versions:
videojs: 4.1.0
videojs-youtube: ccadea (latest commit)

autoplay in IOS don't work

Hello,
I use your good pluging for my video lector on IOS/ANROID.
When I use autoplay in IOS, it don't works because IOS don't run in autoplay with your pluging. It don't want your url :
"http://www.youtube.com/embed/nSYjE30_ruA?disablekb=1&enablejsapi=1&iv_load_policy=3&modestbranding=1&playerapiid=mbAdVideo_youtube_api&wmode=opaque&rel=0&showinfo=0&showsearch=0&controls=0&autoplay=1&loop=0&hd=0&origin=http%3A%2F%2Furl.com"
In the web it works properly.

I found a solution :
On the method Onready, you can test if autoplay is egal to 1 or 0. if autoplay = 1. You can call player.playVideo();

edit : if (player.options.autoplay) {
e.target.playVideo();
}

Thank for your works !

Vulnerability in videojs-youtube

Hello eXon!

I've written this to you in Saturday. But because you've had no information about your e-mail in your github account and in your videojs-youtube repository, so I've found one e-mail, but it was not working (since I've received return). So I was trying to inform you about vulnerability privately, but because of above-mentioned reasons I'd write it publicly in github. Anyway few days ago VideoJS developers released a fix. About this issue you can read in VideoJS repository: videojs/video-js-swf#14.

Here is text of my letter:

Hello developer of videojs-youtube!

I want to inform you about multiple vulnerabilities in VideoJS, which you are using in your software. This is Cross-Site Scripting vulnerability in VideoJS. There is also DoS hole related to this player, which concerned with Flash Player, Adobe fixed it already at 12th of February. Here is my video demonstration of BSOD in Adobe Flash in Mozilla Firefox with using VideoJS (http://www.youtube.com/watch?v=xi29KZ3LD80).

After I've informed VideoJS developers at 08.02.2013, they recently at last fixed XSS vulnerability. The developers recently released version VideoJS Flash Component 3.0.2, updated repositories of VideoJS Flash Component and VideoJS (from which you can download updated version of swf-file) and was planning to release VideoJS 4.0 next week - where XSS hole was fixed. Below is my advisory for vulnerability in VideoJS, which concern your software. Vulnerable are all versions of videojs-youtube.


Affected products:

Vulnerable are versions before VideoJS Flash Component 3.0.2 and VideoJS 4.0. Versions VideoJS Flash Component 3.0.2 and VideoJS 4.0 are not vulnerable to mentioned XSS hole, except XSS via JS callbacks (as it can be read in repository on github).


Affected vendors:

Earlier Zencoder, now Brightcove
http://videojs.com


Details:

Cross-Site Scripting (WASC-08):

http://site/video-js.swf?readyFunction=alert(document.cookie)

For your software:

http://site/lib/video-js.swf?readyFunction=alert(document.cookie)

Best wishes & regards,
Eugene Dokukin aka MustLive
Administrator of Websecurity web site
http://websecurity.com.ua

Quality settings not shown with firefox

When ytcontrols and flash are disabled the quality settings with Firefox are not rendered properly. Furthermore the control panel shows up only when you click inside the player. With Chrome everything works fine.

Fullscreen Issue

When I go fullscreen (I'm using Chrome 26.0), the control bar is frozen. The play button doesn't work and the time slider doesn't seem to be running. This happens every time. The screenshot I attached here is taken after I clicked play and went fullscreen. The video paused right after that and the control bar got broken (it was indicating the wrong time since the video had been played for 4 or 5 seconds and it wasn't running)

Screen Shot 2013-04-21 at 7 34 02 PM

Youtube/iFrame API Issue

I've been getting this error on the console. I tried to google it and it seemed to have something to do with either Youtube or iFrame API:

Unable to post message to http://www.youtube.com. Recipient has origin http://localhost:3000.
www-widgetapi-vflEwv9hv.js:21
Xa www-widgetapi-vflEwv9hv.js:21
W www-widgetapi-vflEwv9hv.js:20
m.addEventListener www-widgetapi-vflEwv9hv.js:20
T www-widgetapi-vflEwv9hv.js:18
Y www-widgetapi-vflEwv9hv.js:22
videojs.Youtube.loadYoutube vjs.youtube.js:33
window.onYouTubeIframeAPIReady vjs.youtube.js:34
(anonymous function) www-widgetapi-vflEwv9hv.js:30
(anonymous function) www-widgetapi-vflEwv9hv.js:31
XMLHttpRequest cannot load http://r3---sn-gjo-2iae.c.youtube.com/videoplayback?burst=40&algorithm=thro…y8DuulTcwc7ci4zPWrKiw&ptchn=joblomovienetwork&pltype=content&range=0-65535. Origin http://www.youtube.com is not allowed by Access-Control-Allow-Origin. cdnoqCViqUo:1
["Video Error", Object]
video.js:19
XMLHttpRequest cannot load http://r3---sn-gjo-2iae.c.youtube.com/videoplayback?burst=40&algorithm=thro…y8DuulTcwc7ci4zPWrKiw&ptchn=joblomovienetwork&pltype=content&range=0-65535. Origin http://www.youtube.com is not allowed by Access-Control-Allow-Origin. cdnoqCViqUo:1

Poster not loading

I'm getting a quick flash of the poster I'm calling for, then it swaps over to the standard YouTube start image. It looks like CSS loads in late, pushing out a "display:none" call to the .vjs-poster element.

Am I just missing something, or is this a know issue?

'load' method not available

Uncaught Error: The "load" method is not available on the playback technology's API -- is this something unimplemented?

Problem under an address with port and the solution

Hi everyone,

I have had a problem using youtube plugin and a webside with a port in the address. When the videojs-youtube creates the iframe in the origin parameter it is using window.location.hostname in stead of window.location.host. The result is different, but I guess is better in the second case, because I can't see any youtube video under an address with a port like localhost:8000. I am getting the next error:

Unable to post message to http://www.youtube.com. Recipient has origin http://192.168.20.40.

The solution is to change the line 92 with window.location.host.

Please, I would like to know the opinion of the creator of videojs-youtube and if you accept pull to the master. I have created a videojs-youtube fork in:

https://github.com/danielcebrian/videojs-youtube

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.