MalGym

Вариант 1 : с помощью acf добавить к пунктам меню доп. поля ( иконку , описание и тд ) и с помощью Walker вывести все поля в нужную разметку

Вариант 2: плагин , например Max Mega Menu

Во-первых , я бы сделал это все вставкой через JS ( само видео ) , просто нет смысла его грузить ( тянуть с серва ) , пока пользователь не нажал , чтобы открыть этот попап , это позволит вам выиграть в скорости .
Во-вторых , когда пользователь закрывает попап , можете чистить путь или опять удалять полностью видео . При повторном открытии оно возьмется уже с кеша и все будет отлично ( если все правильно настроили )

Я для себя нашел одно применение . undefined - значит , что значение не задано , нет его и тд , а null , просто пустота ( все это грубо говоря ) и если нам надо делать проверку , задано ли значение переменной например :

let a = null; 
console.log(a);

Мы получим null , следовательно переменная у нас есть со значение null , а если мы напишем так:

let a = undefined; 
console.log(a);

Мы получим undefined . И тут вот не понятно , то ли у переменной "а" значение ровно undefined , то ли такая переменная вообще не существует. То же самое касамое и свойств в объектах и тд. При отладке не понятно , мы имеем значение равное undefined или такой перменной/свойтсва не существует. Чтобы избежать таких "недопониманий" при отладке и лучше/корнектнее отлавливать ошибки , присваивайте пустым значениям null . Как-то так , мой опыт и мое понимание, если где ошибаюсь , пусть поправят )

Если используете препроцессор , то можно писать так, естественно со своими путями тд

function sassOnCss(done) {
    gulp.src('sass/*.sass')
    .pipe(sass())
    .pipe(gulp.dest('css'))
    .pipe(gulp.src('sass/main.sass'))
    .pipe(sass({
        outputStyle: 'compressed' // минифицируем только файл main.sass
    }))
    .pipe(rename('main.min.css')) // дописываем к минифицированному файлу .min - main.min.css
    .pipe(gulp.dest('css'));

    done();
}

Спасибо )