Выполнить »
×
Изменить ориентацию
Открыть на Codepen
Сменить тему, Темная/Светлая
<!DOCTYPE html> <!DOCTYPE html> <html> <head> <style> .videowrap { max-width: 720px; margin: 0 auto; } .videoblock { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; } .videoblock iframe, object, embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; } </style> </head> <body> <h1>Заголовок видео</h1> <div class="videowrap"> <div class="videoblock"> <iframe width="560" height="315" src="https://www.youtube.com/embed/FjM1dT2_JcE" allowfullscreen></iframe> </div> </div> <p>Это видео адаптивное. Измените размер страницы, чтобы увидеть эффект адаптивности.</p> <p><b>Примечание.</b> Значение padding-bottom: 56.25%; - используется при соотношении видео 16:9. Если соотношение сторон видео другое, то и это значение будет меняться.</p> </body> </html>
