28242 sujets

CSS et mise en forme, CSS3

Hello,
J'ai repéré cet effet vidéo intéressant sur : la home page de ce site (vidéo qui se lit dans un smartphone simulé)

Une idée de la manière de faire cela en HTML/CSS/JS svp ?
Merci par avance pour vos retours.
Cordialement,
La génération au sein du smartphone est un effet différent et qui semble plus complexe à reproduire que l'intégration en mode "full banner". Je n'arrive pas à caler ma vidéo dans le smartphone comme dans le site en exemple...
Cordialement,
Avec le style suivant on semble s'en rapprocher néanmoins. Merci,
body {
        background: #111;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        font-family: Arial, sans-serif;
    }

    /* Cadre smartphone */
    .phone {
        width: 280px;
        height: 560px;
        background: #000;
        border-radius: 40px;
        padding: 18px;
        box-shadow: 0 20px 40px rgba(0,0,0,0.8);
        position: relative;
    }

    /* Haut-parleur */
    .speaker {
        width: 60px;
        height: 6px;
        background: #333;
        border-radius: 3px;
        position: absolute;
        top: 10px;
        left: 50%;
        transform: translateX(-50%);
    }

    /* Écran */
    .screen {
        width: 100%;
        height: 100%;
        background: #000;
        border-radius: 28px;
        overflow: hidden;
        display: flex;
        justify-content: center;
        align-items: center;
    }

    video {
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
</style>


<div class="phone">
    <div class="speaker"></div>
    <div class="screen">
        <video autoplay muted loop>
            <source src="https://www.w3schools.com/html/mov_bbb.mp4" type="video/mp4">
        </video>
    </div>
</div>