Skip to content
simp.io
Simple input/output tools
simp
.io
How to optimize an embedded video for mobile
simp
.io
How to optimize an embedded video for mobile
Menu
How to optimize an embedded video for mobile
Wrap your iframe in two divs
<div class="video-wrapper"> <div class="video"> <iframe allowfullscreen="" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" src="https://www.youtube.com/embed/QDWgWLIBfX4" ></iframe> </div> </div>
Use position: relative and padding in your media query
<style type="text/css"> @media (max-width: 768px) { .video-wrapper { padding: 0px; border: none; } .video { position: relative; padding-bottom: 56.25%; padding-top: 25px; height: 0; } } </style>
Scroll back to top
Guides
Barcode Calculator
Punycode Converter
HTML Formatter
JSON Formatter
XML Formatter
UFR Viewer
Close