Odisseya

Задайте для .wrapper width: min-content;

fit-content работает так — если родительский элемент может предоставить текущему элементу значение ширины больше чем max-content, то fit-content = max-content.

Используйте Critical Path CSS Generator: penthouse или critical. Их принцип работы — запустить сайт в клиентской среде (headless browser) и выбрать стили необходимые только для первого экрана. Стили для нескольких страниц (различных шаблонов) можно склеить в один файл. Отмечу, что рендерить стили стоит на нескольких разрешениях — для десктопов и мобильных, а также проверить наличие стилей состояний и модальных окон — подключив только сгенерированный critical css.

Если я правильно поняла, вопрос о состоянии левого блока во время проигрывания видео. Тогда, можно проиграть видео в модальном окне (на мобильных это обычно удобней всего, т.к. при просмотре можно сменить ориентацию на горизонтальную, а блок с видео останется в фокусе), либо не смещая имеющихся координат позиционировать блок видео самым верхним слоем, а под ним сделать полупрозрачный оверлей — для удобства просмотра ролика. Если есть возможность, можно уточнить у дизайнера задуманную логику поведения элемента.

Приведенные способы работать не будут. Вариант с preload as="document" отпадает — в Хроме выдает ошибку (см.консоль). prefetch не гарантирует загрузку (остается на усмотрение браузера), а также, может ругаться сообщением безопасности на ссылку с другого домена (X-Frame-Options: SAMEORIGIN). Вариант решения: подгружайте содержимое iframe вставкой в разметку в нужный момент (отображение можно скрыть стилями).

Подгружайте вместо видео картинку-заставку. Например, если это YouTube. А по клику на заставку — загружайте видео. Чтоб не тратить время на днс-резолв заставку можно у себя "закэшировать."

Пропишите для .wrapper{ align-items: flex-start; } и для .sticky{ position: fixed; }
Можно еще для .left { overflow-y: auto; }
Так происходит от того, что по умолчанию, флекс контейнер растягивает обе колонки на одинаковую высоту.

Причин может быть несколько. Если у вас подозрения на медлительность CMS — сделайте статическую копию страницы с высоким TTFB. Измерьте данный показатель на статике. Так, вы сможете определить, насколько ухудшает TTFB скорость генерации контента Wordpress'ом. Если показатель метрики не слишком отличается, присмотритесь к оптимизации ресурсов сервера.

Кнопка должна быть флекс-элементом, задайте ей margin-top: auto; т.о. кнопка оттолкнется сверху на доступную высоту. Блоки будут одинаковой высоты при условии, что флекс-контейнеру задано выравнивание (вдоль поперечной оси) stretch.

Не обязательно задавать явно размер элементу — у браузера есть процесс компоновки дерева отображения, когда он сам вычисляет размеры элементов и их координаты. При вычислении размеров браузер может учитывать явно заданный вами размер или вычислить его самостоятельно исходя из правил блочной модели (потока рендеринга).

Здравствуйте. Похоже, это происходит из-за сложности вычисления пропорций при отсутствии начального размера "холста" для изображения. Если задать на самом изображении: <img width="100" …> — ваш код должен работать.

Как вариант, можно прописать в стилях:

img {
    flex: 1 1 auto;
    width: 100px;
  }

Так мы зададим размер холста под изображение, а потом переопределим его через flex-basis.
NB закрывающй тег флекс-контейнера </a> — стоит дописать.

Попробуйте задать блоку с видео .video-container { overflow: hidden; }, но это костыль.