Console Error when Loading Video

This issue is pulled from https://github.com/vimeo/player.js/issues/43#issuecomment-260377257 and most of it is a copy.

In trying to get a working example I think I narrowed down the issue and it’s possibly not because of this library but instead some other Vimeo JS. 😄 Specifically, the error is line 8 of VimeoPlayer - v2.39.3.

The error looks like it’s because of the content security policy, not because of the image being null. Modifying the CSP on the site didn’t correct the error, so I’m starting to think the error is outside of my control entirely. I’m using this on a Shopify store and cannot modify server settings. I tried adding a more open CSP using a meta tag, but that didn’t work either.

Expected Behavior

When loading a video, I don’t expect a console error. 😄

Actual Behavior

There is a console error when a first video is loaded.

Steps to Reproduce

Steps to reproduce on the site that I’m working on are pretty simple:

player = new Vimeo.Player([some_element]));
player.loadVideo(152464736).then(function(data){ console.log(data)});

The example above uses a public video, but I can reproduce with other video IDs that I have (which are private).

player.js:8 Refused to load the image 'https://player.vimeo.com/video/null' because it violates the following Content Security Policy directive: "img-src https://i.vimeocdn.com https://secure-b.vimeocdn.com https://f.vimeocdn.com https://vimeo.com https://sb.scorecardresearch.com https://ssl.google-analytics.com https://secure.gravatar.com https://i0.wp.com https://i1.wp.com https://i2.wp.com https://f.vimeocdn.com".

In that error it’s saying the video ID is null, but it’s actually being passed in correctly. (I’ve even tried hardcoding in an ID to be sure I’m actually loading a real ID.) I’m not sure where it’s getting null from. My code is below, but if I put a console.log(data) inside the loadVideo().then() I always see the correct ID being passed back. No errors are coming out of the catch().

myWorkoutPlayer.loadVideo(chosenVideoId).then(function(data) {
  myWorkoutPlayer.getVideoTitle().then(function(data) {
    $('#myWorkoutPlayer .modal-subtitel').text(data);
  });

  var oneIndexedPosition = currentPlaylistposition + 1;
  var updatedWorkoutText = 'My Workout (' + oneIndexedPosition + '/' + customerVideoQueue.length + ')';
  $('#myWorkoutPlayer #modalTitle a').text(updatedWorkoutText);
  return myWorkoutPlayer.play();
}).catch(function(err) {
  console.log(err);
});

As for creating a working demo of the issue, I have not had success replicating outside of the Shopify store. The theme that we are working on that uses the Vimeo library and produces the issue is not public, so I cannot share a direct link. ☹️

[dilakshandc]

error still existing. ;/

[Mr-Anonymous]

I still get the error. I embed the video iframe like this:

<iframe src="https://player.vimeo.com/video/{{ $videoId }}?badge=0&autopause=0&player_id=0" width="{{ $width }}" height="{{ $height }}" frameborder="0" webkitallowfullscreen mozallowfullscreen allowfullscreen></iframe>

When the above iframe is loaded in my ionic android app, the console throws these errors:

Refused to load the image 'android-webview-video-poster:default_video_poster/********************' because it violates the following Content Security Policy directive: "img-src 'self' data: https://i.vimeocdn.com https://secure-b.vimeocdn.com https://f.vimeocdn.com https://vimeo.com https://secure.gravatar.com https://i0.wp.com https://i1.wp.com https://i2.wp.com https://player.vimeo.com https://*.ci.vimeows.com https://f.vimeocdn.com".