Partage de code pratique HTML5 pour une vidéo flexible utilisant CSS

Lorsque je codais Elemin Theme (un site réactif que j'ai récemment conçu), un problème de saut d'image que j'ai rencontré était de savoir comment rendre les vidéos intégrées plus flexibles dans les changements de taille. L'utilisation de max-width:100% et height:auto peut faire fonctionner la balise vidéo de html5, mais cette solution ne fonctionne pas pour l'iframe ou le code en ligne de la balise object. Après des heures de recherche et d'expérimentation, j'ai enfin trouvé la solution. Cette astuce CSS est utile lorsque vous effectuez une conception réactive. Vous pouvez visiter l'adresse de démonstration finale et zoomer sur votre navigateur pour voir l'effet.

Balise vidéo html5 flexible (démo)

En utilisant la vidéo html5, vous pouvez la rendre flexible en définissant la largeur maximale : 100 %. Dans l’introduction précédente, il a été mentionné qu’il ne convient pas aux codes intégrés dans les iframes et les objets couramment utilisés.

video {
    max-width: 100%;
    height: auto;
}

Objet flexible & Vidéo intégrée Iframe

Cette technique est assez simple, vous devez ajouter un conteneur

p La valeur de l'attribut padding-bottom est définie entre 50 % et 60 %. Définissez ensuite la largeur et la hauteur de l'élément enfant (ifame ou objet) à 100 % et utilisez le positionnement absolu. Cela forcera l'objet incorporé à s'étendre automatiquement jusqu'à sa taille maximale.

　CSS

.video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}.video-container iframe,  
.video-container object,  
.video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

　HTML

<p class="video-container">
    <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe></p>

Flexibilité avec largeur fixe

Si le la largeur de la vidéo est limitée, nous avons alors besoin d'un conteneur

supplémentaire pour envelopper la vidéo et définir une largeur fixe et une largeur maximale : 100 % pour p.

　CSS

.video-wrapper {
    width: 600px;
    max-width: 100%;
}

　HTML

<p class="video-wrapper">
    <p class="video-container">
        <iframe src="http://player.vimeo.com/video/6284199?title=0&byline=0&portrait=0" width="800" height="450" frameborder="0"></iframe>
    </p>
    <!-- /video --></p><!-- /video-wrapper -->

Compatibilité

Cette technique supporte tous les navigateurs , notamment : Chrome, Safari, Firefox, Internet Explorer, Opera, iPhone et iPad.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!