I can't launch more than one Youtube video with afterglow class :

<video id="video1" class="afterglow" width="1920" height="1080" data-youtube-id="HgbHx4CY300"></video>
<video id="video2" class="afterglow" width="1920" height="1080" data-youtube-id="CaksNlNniis"></video>

fiddle : https://jsfiddle.net/bmartel/whf01e58/

Or is there another way ?

Thanks for your help

Seems to be a timing issue.

The lightbox doesn't appear on iOS devices for now. Should be a simple fix.

This issue has been confirmed for Windows 7 but might affect other Windows version, too

my console output this message.

VIDEOJS: WARN: Access to videojs.players is deprecated; use videojs.getPlayers instead

maybe would better update the core.

Thanks. Excellent player

I can't seem to get this working with webpack. Any suggestions?

There seems to be just some cases where the lightbox does't play properly. Happens on Chrome mobile.

The skin file needs to be adapted, also IE10 should be tested thoroughly.

I've got videos I'm adding to the page after page load via js.

How can I tell afterglow to work its magic on them?

Player setup:

<a class="afterglow" href="#myvideo">Launch lightbox</a>
<video id="myvideo" width="960" height="540">
    <source data-youtube-id="{youtube-id}" data-overscale="false" />
</video>

Expected result: Should play youtube video in Lightbox mode
Actual result: Video does not load
Browser: Safari 11.0.1

Hello,

Is it possible to add the subtitles option in your next version please ?
It will be very useful.

This should be realized for 0.1

Can you please add support for Bower?

The new method should match the pattern setAspectRatio(XX, YY). Ideally, there should also be a new method setVideo() and maybe a playlist feature.

See https://community.afterglowplayer.com/d/67-make-video-fit-player

Bug report from Kirill Ivenkov (thank you!)

once I start up the video playback (I'm starting the playback by clicking a link with href="#<video_id>") two font 404s pop up in the console, perhaps some of the font files mentioned in @font-face are missing?

GET http://my domain/path to static file dir/css/fonts/vjs.woff - 404
GET http://my domain/path to static file dir/css/fonts/vjs.ttf - 404

I'm using CDN-hosted Afterglow. Not a big issue though.

Could not confirm those yet in Chrome.

This is a beautiful little video player, and the upcoming features in the roadmap look truly promising.

There is just one issue that makes me reluctant to use it: The file size of 369kB of the already minified JS file for the player. I have looked at many other open source player scripts with similar features, but none of them are anywhere near that file size, so I'm just wondering if there is anything that can be done about it.

Presumably, with any additional features like the ones listed in the roadmap, the file size will be increasing even more, which will make this otherwise really great player a non-option for many users, I think.

I have a self-hosted v1.0 player instance with a single mp4 video source that is served from another domain. There is no 'data-youtube-id' defined, but when the player loads it still makes a call to https://www.youtube.com/iframe_api.

This call will start failing when I enable CSP headers for the site, so maybe it won't be an issue, but is that the expected behavior - that it pulls JavaScript from YouTube on every video load regardless of the source?
It looks like this call originates with the video.js YouTube plugin. Should I instead open an issue there?

Hi,

This behavior is not easy to reproduce, but let me try to explain what I believe is the problem.

We can use Content Security Policy to prevent resources from being loaded from non-approved sites. The quick reference guide reads

The new Content-Security-Policy HTTP response header helps you reduce XSS risks on modern browsers by declaring what dynamic resources are allowed to load via a HTTP Header.

If you set the default policy to * 'unsafe-inline' 'self' 'unsafe-eval' data ( = basically load anything from anywhere is the default behavior) but restrict the style to 'self' 'unsafe-inline' (= load the style only from the same server, and allow inline style), then everything loads perfectly, except for https://fonts.googleapis.com/css?family=Open+Sans:400,300. This is the expected behavior.

The strange part is that, this will prevent afterglow from working completely. The video loaded from vimeo or youtube won't be displayed, no style will be applied, and what will be served is just the plain video html element.

This behavior is difficult to reproduce. You can see it live at https://micr0lab.org/mu0l_0092/, I tried to reproduce it with the following minimal example:

<!DOCTYPE html>
<?php header("Content-Security-Policy: default-src * 'unsafe-inline' 'self' 'unsafe-eval' data;: style-src 'self' 'unsafe-inline'"); ?>
<html>
  <head>
    <title>afterglow player</title>
    <script src="afterglowplayer.js"></script>
  </head>
  <body>
   <video class="afterglow" width="1280" height="720" data-vimeo-id="238388144">
      <source type="video/mp4" src="L_eau_croupie_et_les_fantasmins.mp4" />
    </video>
  </body>
</html>

that you can test live at https://micr0lab.org/t/, but it doesn't exactly show the same weird behavior.

I have this error when installing afterglow with bower
Unexpected token ] in JSON at position 490
can you verify this please

If no type is provided and there is mp4 and webm, this causes the resolution switcher to crash. Types should be detected automatically by filename ending.

Scenario:
User pauses video and starts scrolling page.

Within seconds the entire page scroll backs to the top of the video.

User is really annoyed that the whole page scrolled for no reason, back to content they seen already and were trying to ignore.

They leave the website.

Example:
https://youtu.be/NQYjaC0NeFY

Can this issue be fixed please?
It happens on the main afterglow website as well, on all major browsers we tested with.

It's a really nice video player, but this weird bug causing the entire page to jank after pausing the video is disconcerting to the users' experience.

See https://community.afterglowplayer.com/d/35-youtube-data-embed-not-working-for-mobiles/2

Hi.

When i used the afterglow js plugin for my video IE hangs when sliding the slider unlike when I am not using the plugin. Any way to fix this? Thanks in advance. Nice plugin btw

In the makings...

I recently found a video hosting site called Streamable and I think it looks pretty nice. Do you think adding support for it would be worth it?

As iPhone and Android won't play most high res MP4 files, they should be served with the SD version by default.

Can you add support for videos from Dailymotion?

How I can disable controls of the player? The controls flag on the video element doesn't work and there is no option for that in the docs.
Thx:) beautyful player

See https://community.afterglowplayer.com/d/42-ios-9-default-play-button-appears-after-clicking-play

See https://community.afterglowplayer.com/d/66-youtube-fullscreen-on-mobile

autoplay="autoplay" is in the video tag in the source code and it works if JS is turned off, it doesn't work if JS is turned on and afterglow is kicking in.

Side note: Sign Up for the community forum is not working (tried in chrome and firefox)

Can you add support for videos from vidme?

Maybe this is caused by the poster overlaying it, but probably it's some other problem. Has to be tested and fixed

Afterglow should play HLS videos

I did a little test in JSFiddle to play hls video with the HLS.js
https://github.com/video-dev/hls.js

Demo:
https://jsfiddle.net/onigetoc/e0f5e734/

Live Video:
https://jsfiddle.net/onigetoc/e0f5e734/7/

It does not seem like a good approach to always make a connection to the youtube server to load the iframe api which then loads another file from another source, even if none of it is needed.

In some situation there is no need in such a behaviour. For e.x. there is a background video without any controls and popup video on the same page. After opening lightbox backgroud video stops without posibility to start again.

There seem to be some errors when it comes to dom element selection.

See https://community.afterglowplayer.com/discussion/2/what-do-you-need-in-your-everyday-life#Comment_31

The big play button seems not to be working. Is hotfixed via font-style: bold, but needs some fixing.

See https://community.afterglowplayer.com/d/24-resolution-switching-problems for more information

Is it possible to configure afterglow such that double-clicking the video activates fullscreen mode? I haven't found something like this in the documentation, yet.

Even better would be to have a configuration parameter that decides whether double click activates fullscreen or lightbox.

Something like this:

<video class="afterglow" id="myvideo" width="1280" height="720" 
  data-double-click="fullscreen">

  <source type="video/mp4" src="/path/to/myvideo.mp4" />
</video>

Thanks for the awesome project!

This is a feature request.

Could you provide a un-compressed version of your tool (i.e., of your js file), to allow easier edition and study of your code.

How is it possible to access the API methods with lightbox setup?

If it is possible, please modify this CodePen to show how:
https://codepen.io/beau/pen/ad4101aa2065775d4bba0cfc71e7e06d/

If not, adding the ability to access the API when playing videos in the lightbox would be stellar!

https://github.com/vidcaster/video-js-resolutions is in 404