videoyoutubeembed

Web page embedded YouTube video, how to display the mobile interface of the player on the phone

I embed youtube videos on the Web, but the phone displays the same player interface as the PC, with small buttons that make it difficult to click. But reddit embedded YouTube videos Instead, it shows the phone interface.

enter image description here

enter image description here

Here is my code, thank you

    <div>video embed</div>   
    <div style="width: 100%; height: 50px;"></div>
    <div style="width: 100%; min-width: 200px; max-width: 1500px; display:table; margin:0 auto;">
        <div style="position: relative; width: 100%; overflow: hidden; padding-top: 56.25%;">
            <p><iframe style="position: absolute; top: 0; left: 0; right: 0; width: 100%; height: 100%; border: none;" src="https://www.youtube.com/embed/NE9ZW-fxP0w?rel=0" width="560" height="315" allowfullscreen="allowfullscreen" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"></iframe></p>
        </div>
    </div>

I want to be like reddit with embedded videos showing the mobile interface

Solution

  • You must set <meta name="viewport" content="width=device-width, initial-scale=1.0"> in your <head> tag so that the page is properly scaled on mobile devices, otherwise, your browser will present you with a 'zoomed out' view.

    Another (not recommended) solution is to set your <iframe> to 100vw width rather than 100%.

    This page explains more about the uses of the viewport meta tag.