HFP-3143 Add listener for canplay video event that resizes

Some videos may resize their client dimensions when the canplay event
is triggered, so we must react to this by resizing.

Author: thomasmars

src/scripts/interactive-video.js

@@ -282,21 +282,16 @@ function InteractiveVideo(params, id, contentData) {
 
     // Handle video source loaded events (metadata)
     self.video.on('loaded', function () {
-      // If already loaded, just trigger resize. This is necessary
-      //  because some browsers does not handle certain events from
-      //  video, e.g. Safari only handles the 'loadedmetadata' event,
-      //  while FF handles both 'loadedMetadata' and 'canplay' so we want
-      //  to make sure we resize after the last load event we get.
-      if (isLoaded) {
-        self.trigger('resize');
-        return;
-      }
-
       isLoaded = true;
       // Update IV player UI
       self.loaded();
     });
 
+    // Video may change size on canplay, so we must react by resizing
+    self.video.on('canplay', function () {
+      self.trigger('resize');
+    });
+
     self.video.on('error', function () {
       // Make sure splash screen is removed so the error is visible.
       self.removeSplash();