Weird rendering of Brightcove video player

[natea]

The video player that appears in the LMS seems to be missing elements or the elements are mispositioned. See attached screenshot.

[z4y4ts]

Wow, that's really messed up. Looks like css are missing completely.

Can you please provide more details:

• What version is installed?
• What are the xblock settings?

I'll try to reproduce that on our instance tomorrow.

[natea]

How can I find the version of the XBlock? And where do I find the XBlock settings?

[natea]

I think we're using 0.6.5 according to this: https://github.com/appsembler/xblock-video/blob/master/setup.py#L7

[natea]

More specifically, here is the commit that's installed:

EDXAPP_EXTRA_REQUIREMENTS:
  - name: 'git+https://github.com/edx-solutions/xblock-brightcove.git@b8d13b6b3b0c3c31a3334cf887b448076dc2bad8#egg=xblock-brightcove'

[natea]

These are the XBlock settings (with secrets removed):

EDXAPP_XBLOCK_SETTINGS:
  "video_xblock": { 
    "threeplaymedia_apikey": "xxxxxxxxxx",
    "account_id": "xxxxxxxxxxx"
  }

[z4y4ts]

If you've installed the latest code, then yes, it's 0.6.5

github.com/edx-solutions/xblock-brightcove is not our XBlock.

To see XBlock settings click on the "Edit" button above the video.

I need at least video url, account_id and player_id (if set) and all other settings if you changed anything in the advanced tab.

[natea]

I'm seeing this in the web developer console:

Invalid 'X-Frame-Options' header encountered when loading 'https://studio.staging-openedx.learning.intersystems.com/preview/xblock/blo…VT101+2017_Spring+type@video_xblock+block@c209e18de3f4448bbb391c0c676994e1': 'ALLOW' is not a recognized directive. The header will be ignored.
VM8281:30 Data processed successfully.
index.min.js:19 GET https://edge.api.brightcove.com/playback/v1/accounts/90843153001/videos/5186070740001 404 (Not Found)
h @ index.min.js:19
f @ index.min.js:19
h @ index.min.js:19
q @ index.min.js:20
w @ index.min.js:20
I @ index.min.js:20
(anonymous) @ index.min.js:9
ba @ index.min.js:9
n @ index.min.js:20
(anonymous) @ index.min.js:20
(anonymous) @ index.min.js:1
(anonymous) @ index.min.js:1

[natea]

video url: https://studio.brightcove.com/products/videocloud/media/videos/5186070740001 account_id: 90843153001 (this is what appears in Studio, although when i go to "account information, it says my account ID is 5184446939001) player_id: not set

When I replaced the account ID from '90843153001' to '5184446939001', then the video player renders properly! The first account number is our customer's account ID, and must be getting read from server-vars.yml, whereas the second account number is the one I'm using for testing, and it's an Appsembler Brightcove account.

So it appears that when you try to use an account number that you don't own, that's what causes the weird video player rendering to occur.

[z4y4ts]

I can confirm this issue. Was able to reproduce on our instance.

Wrong Brightcove account ID breaks player UI. We'll need to prioritize this.

[bryanlandia]

@natea Can you close this issue, plz? It's been resolved.

[bryanlandia]

@natea ping.