diff --git a/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html b/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html
index 26790f9c0..3d51c3406 100644
--- a/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html
+++ b/src/addons/mod/h5pactivity/components/index/addon-mod-h5pactivity-index.html
@@ -81,7 +81,7 @@
+ [trackComponent]="trackComponent" [contextId]="h5pActivity?.context" [enableInAppFullscreen]="true">
diff --git a/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html b/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html
index 4a92470fb..7a7a036c2 100644
--- a/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html
+++ b/src/addons/mod/imscp/components/index/addon-mod-imscp-index.html
@@ -42,7 +42,7 @@
-
+
diff --git a/src/core/features/course/components/module-info/course-module-info.scss b/src/core/features/course/components/module-info/course-module-info.scss
index f540001d2..82b2a68a3 100644
--- a/src/core/features/course/components/module-info/course-module-info.scss
+++ b/src/core/features/course/components/module-info/course-module-info.scss
@@ -22,3 +22,8 @@
}
}
+
+:host-context(.core-iframe-fullscreen) {
+ opacity: 0 !important;
+ height: 0 !important;
+}
diff --git a/src/core/features/h5p/components/h5p-iframe/core-h5p-iframe.html b/src/core/features/h5p/components/h5p-iframe/core-h5p-iframe.html
index 52020bec3..c60f30592 100644
--- a/src/core/features/h5p/components/h5p-iframe/core-h5p-iframe.html
+++ b/src/core/features/h5p/components/h5p-iframe/core-h5p-iframe.html
@@ -1,5 +1,6 @@
-
+
diff --git a/src/core/features/h5p/components/h5p-iframe/h5p-iframe.ts b/src/core/features/h5p/components/h5p-iframe/h5p-iframe.ts
index 1af3f74d2..9c5d39396 100644
--- a/src/core/features/h5p/components/h5p-iframe/h5p-iframe.ts
+++ b/src/core/features/h5p/components/h5p-iframe/h5p-iframe.ts
@@ -44,6 +44,7 @@ export class CoreH5PIframeComponent implements OnChanges, OnDestroy {
@Input() onlinePlayerUrl?: string; // The URL of the online player to display the H5P package.
@Input() trackComponent?: string; // Component to send xAPI events to.
@Input() contextId?: number; // Context ID. Required for tracking.
+ @Input() enableInAppFullscreen?: boolean; // Whether to enable our custom in-app fullscreen feature.
@Output() onIframeUrlSet = new EventEmitter<{src: string; online: boolean}>();
@Output() onIframeLoaded = new EventEmitter();
diff --git a/src/theme/theme.base.scss b/src/theme/theme.base.scss
index 31aed6866..9e2dbeda8 100644
--- a/src/theme/theme.base.scss
+++ b/src/theme/theme.base.scss
@@ -1279,17 +1279,18 @@ ion-header[collapsible] {
ion-title {
@include core-transition(opacity, 0ms);
}
+}
- &:not(.core-header-collapsed) {
- ion-toolbar {
- --core-header-toolbar-background: rgba(255, 255, 255, 0);
- --core-header-toolbar-border-width: 0;
- }
+// Only hide header when not in fullscreen.
+body:not(.core-iframe-fullscreen) ion-header[collapsible]:not(.core-header-collapsed) {
+ ion-toolbar {
+ --core-header-toolbar-background: rgba(255, 255, 255, 0);
+ --core-header-toolbar-border-width: 0;
+ }
- ion-title, &::after {
- opacity: 0;
- z-index: 0;
- }
+ ion-title, &::after {
+ opacity: 0;
+ z-index: 0;
}
}
@@ -1350,3 +1351,8 @@ ion-app.md .collapsible-title h1 {
text-overflow: ellipsis;
}
}
+
+// In fullscreen, disable the offset-top added by collapsible header.
+body.core-iframe-fullscreen ion-content {
+ --offset-top: 0px !important;
+}