fix: only print element not in DOM warning on player creation (#4755)

src/js/video.js

@@ -100,17 +100,17 @@ function videojs(id, options, ready) {
     throw new TypeError('The element or ID supplied is not valid. (videojs)');
   }
 
-  // Check if element is included in the DOM
-  if (Dom.isEl(tag) && !document.body.contains(tag)) {
-    log.warn('The element supplied is not included in the DOM');
-  }
-
   // Element may have a player attr referring to an already created player instance.
   // If so return that otherwise set up a new player below
   if (tag.player || Player.players[tag.playerId]) {
     return tag.player || Player.players[tag.playerId];
   }
 
+  // Check if element is included in the DOM
+  if (Dom.isEl(tag) && !document.body.contains(tag)) {
+    log.warn('The element supplied is not included in the DOM');
+  }
+
   options = options || {};
 
   videojs.hooks('beforesetup').forEach(function(hookFunction) {

test/unit/video.test.js

@@ -65,13 +65,16 @@ function(assert) {
 
   const vid = document.createElement('video');
 
+  vid.id = 'test_vid_id';
   fixture.appendChild(vid);
   const player = videojs(vid);
 
   assert.ok(player, 'created player from tag');
   assert.equal(warnLogs.length, 0, 'no warn logs');
 
   const vid2 = document.createElement('video');
+
+  vid2.id = 'test_vid_id2';
   const player2 = videojs(vid2);
 
   assert.ok(player2, 'created player from tag');
@@ -80,6 +83,11 @@ function(assert) {
                'The element supplied is not included in the DOM',
                'logged the right message');
 
+  // should only log warnings on the first creation
+  videojs(vid2);
+  videojs('test_vid_id2');
+  assert.equal(warnLogs.length, 1, 'did not log another warning');
+
   log.warn = origWarnLog;
   player.dispose();
   player2.dispose();