fix(fullscreen portals): consider the fullsceeen element is body is a video is in fullscreen (quasarframework#7480)

Author: pdanpdan

ui/dev/src/pages/other/app-fullscreen-portals.vue

@@ -223,6 +223,14 @@
       </q-card-section>
     </q-card>
 
+    <video
+      style="width: 300px"
+      src="https://commondatastorage.googleapis.com/gtv-videos-bucket/sample/BigBuckBunny.mp4"
+      controls
+      playsinline
+      loop
+    />
+
     <q-dialog v-model="dialog3" seamless position="bottom">
       <q-card class="bg-white">
         <q-card-section>

ui/src/utils/dom.js

@@ -64,7 +64,12 @@ export function childHasFocus (el, focusedEl) {
 // internal
 export function getBodyFullscreenElement (isFullscreen, activeEl) {
   return isFullscreen === true
-    ? (activeEl === document.documentElement ? document.body : activeEl)
+    ? (
+      // when a video tag enters fullscreen activeEl is null
+      activeEl === document.documentElement || activeEl === null
+        ? document.body
+        : activeEl
+    )
     : document.body
 }