Contrib.social

Embedded YouTube vids showing on top of the mobile menu

Open on Drupal.org ā†’
Created on 26 July 2024, 5 months ago
Updated 26 August 2024, 4 months ago

Problem/Motivation

Embedded YouTube vids displayed in front of the mobile menu on mobiles and desktops, seems to be all browsers.

Steps to reproduce

Krymp vinduet med en side som inneholder en innebygd YouTube-video til minimum bredde, og trykk pƄ hamburgermenyen.
Reduce window size on a page containing a YT video to mimimal width and hit the hamburger menu.

Proposed resolution

Add z-index: 3; in region-header.css:
header[role="banner"] {
display: flex;
min-height: var(--header-height-mobile);
position: fixed;
top: 0;
width: 100%;
z-index: 3; <----
}

Add z-index: 1 !important; in Embed section in blocks.css:
.wp-block-embed.type-video > .wp-block-embed__wrapper,
.wp-block-embed-youtube > .wp-block-embed__wrapper {
position: relative;
width: 100%;
height: 0;
padding-top: 56.25%;
z-index: 1 !important;
}

.wp-block-embed.type-video > .wp-block-embed__wrapper > iframe,
.wp-block-embed-youtube > .wp-block-embed__wrapper > iframe {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
bottom: 0;
right: 0;
z-index: 1 !important;
}

Remaining tasks

šŸ› Bug report
Status

Fixed

Version

1.0

Component

Code

Created by

šŸ‡³šŸ‡“Norway thorandre

Live updates comments and jobs are added and updated live.
Sign in to follow issues

Merge Requests

Comments & Activities

contrib.social Blog FAQ Discussions
Production build 0.71.5 2024