search

sampotts / plyr

A simple HTML5, YouTube and Vimeo player
https://plyr.io
MIT License
26.09k stars 2.91k forks source link

YouTube player doesn't work in Google Chrome (even on the demo) #1538

Open vanesca88 opened 4 years ago

vanesca88 commented 4 years ago

Hi :) First time writing a bug report, haha. Love this project. I've implemented it on my new website, but was a little sad that I couldn't make it work on Google Chrome. Other than that 10/10 👍

Expected behaviour

Clicking on the YouTube video should play the video.

Actual behaviour

The video is completely stuck, and doesn't play. It also shows the Youtube play-button, instead of the regular blue-button of Plyr. You can try clicking on the button, but nothing happens. You also don't see any controls.

I made a simple image to show the issue: https://imgur.com/a/LvBMiTU

Steps to reproduce

This even occurs on the main website.

  1. Go to the official website: https://plyr.io/#youtube
  2. Click the youtube button (on the left side)
  3. Now click on the video. (Nothing happens)

Environment

Link to where the bug is happening

https://plyr.io/#youtube (main website) https://codepen.io/pen?template=GGqbbJ (or the official youtube template) They both showcase the error, but only if you use Google Chrome.

vanesca88 commented 4 years ago

I already found out the issue. Apparently Adblock causes the video issue. Problem is, that millions of people have Adblock installed.

I refreshed the original website (https://plyr.io/#youtube),but with Adblock off. And it seems to work. Not sure if this is still valid as a bug-report. Then again, all other players seem to work fine, even with Adblock on.

SamuelNitsche commented 4 years ago

Everything works fine for me.

Chrome Version 76.0.3809.132 macOS 10.14.5

jpsear commented 4 years ago

I can confirm that an adblocker in Chrome also stops the video from playing for me...

This video does not play with an adblocker enabled: https://codepen.io/pen?template=GGqbbJ This video does play with an adblocker enabled: https://yoriiis.github.io/create-youtube-player

Chrome 76.0.3809.132 AdGuard AdBlocker 3.2.1 macOS 10.14.6

sogehige commented 4 years ago

For me its popup blocker on chrome

ouun commented 4 years ago

Same here with Brave Browser (chromium as well)

SamuelNitsche commented 4 years ago

Same here with Brave Browser (chromium as well)

Cannot confirm this. Brave Browser (Version 1.0.0 Chromium: 78.0.3904.97) on macOS works perfectly fine.

mdominguez commented 4 years ago

Very weird but this has worked with Adblock on for the last week or so. Unfortunately since yesterday this error started occurring... What changed? :/

sanskarpustack commented 3 years ago

Not working for me even without Adblock what could be possible issuess?

geraman21 commented 3 years ago

Will there be any follow up on this issue ? Library is pretty much unusable with youtube atm...

SamuelNitsche commented 3 years ago

Will there be any follow up on this issue ? Library is pretty much unusable with youtube atm...

Can you give us more information about your problem? I cannot reproduce this. Do you have any console errors or anything like that?

geraman21 commented 3 years ago

As I understood it is related to youtube rejecting PostMessage (Which normally shouldnt hinder the playback). Here is a screenshot of console plyr_console_log

sampotts commented 3 years ago

It's odd that I'm unable to produce this on the demo site. Anyone else? Obviously, there's an error there though.

geraman21 commented 3 years ago

@sampotts no unfortunately not, Want to make it clear though that I am using plyr through another library, which inserts it into an IFrame, but the implementation is exactly as suggesting in plyr docs, thus I think its unrelated, I might be wrong though (npm react-plyr) Here is the IFrame:

image

SamuelNitsche commented 3 years ago

@geraman21 Since you cannot reproduce this on the demo page this most likely is not an issue with plyr itself.

geraman21 commented 3 years ago

@SamuelNitsche I havent tried to reproduce it on Demo page, what exactly do you mean by that ?

SamuelNitsche commented 3 years ago

Please visit https://plyr.io/#youtube and start the playback of the video. The library you referenced is using a plyr version from early 2019. I think you shouldn't use this one.

geraman21 commented 3 years ago

@SamuelNitsche you were right, embedding works using plyr library only. However I have tons of problems trying to customize the player to my needs now. I am writing my project in react using Functional components. Is there by any chance a sandbox with an example implementation of plyr in react with hooks ? If not is there a sandbox for the demo that you have sent me ? I would really appreciate any help xD

SamuelNitsche commented 3 years ago

I don't think there is something like a sandbox but what are you trying to customize? I think there really should be no big difference.

geraman21 commented 3 years ago

@SamuelNitsche ok, I have figured it out. If you are trying to create React component using plyr its vital to import plyr.css. Maybe its going to help someone in the future :)

import "plyr/dist/plyr.css";

SamuelNitsche commented 3 years ago

Glad you figured it out.