средствами самого ютуба вряд ли получится.
как вариант:
берешь iframe с выставленным autoplay и img к примеру с превью.
вот с ними и работаешь. т.е. подменяешь их в нужный момент.
не забудь полностью очищать iframe или удалять src. иначе при подмене autoplay небудет обновляться.
ну как бы от того что ты их поменял - они не перестали загружаться в браузере. ты по сути даже хуже сделал. у тебя сначала грузятся jpg/png, а потом в добавок webp.
чего именно ты хочешь добиться в итоге?
для flex для этих целей есть https://developer.mozilla.org/ru/docs/Web/CSS/flex...
НО и в этом случае ты не увидишь 290px и 150px. потому что их ограничивает родительский элемент .form.search который.
задай к примеру для .form.search {width: 600px;} и с flex-basis будет работать
bootstrap - это инструмент. как, собственно, и другие css фреймворки.
т.е. если у тебя есть задача, которую можно будет решить инструментом - используй.
а актуальность - это поддержка и обновления. с этим у bootstrap все хорошо. вон пятая версия уже в бэте
ты не создаешь вложенность. эта запись формирует код вида .footer_divider это sass так работает. ошибки нет.
если хочешь вложенность - то указывай ее явно. к примеру:
независимо от типа position элементы, которые будут выходить за правую и нижнюю границу - будут создавать скролл.
оборачивай внешний элемент в блок с overflow: hidden например
тебе нужно из scss исходников бутстрапа скомпилировать css. и его уже подключить к странице.
как скомпилировать - вариантов куча. плагины для ide и редакторов, отдельные программы для ОС, npm зависимости gulp, webpack и пр. гуглится тоже легко
