Est-il possible de rendre une balise *portrait* <video> responsive dans WordPress ?

[remarque importante : cela n’affecte que les balises auto-hébergées <video>, pas les iframes youtube ou vimeo]

J’intègre donc dans la page des vidéos de téléphones portables avec un rapport vertical (portrait) (généralement 720px de largeur et 1280px de hauteur).

Tout fonctionne, sauf que les vidéos ne s’adapteront pas à la page. La largeur conviendra, mais l’utilisateur doit faire défiler la vidéo de haut en bas pour apprécier ce qui est affiché.

J’ai essayé toutes les astuces CSS pour rendre la vidéo div réactive, mais cela ne fonctionnera pas.

Les vidéos sont enveloppées dans un div qui se lit comme suit :

.wp-video-shortcode, video, .mejs-mediaelement {
    max-width: 100% !important;
    max-height:100% !important;
}

Mais sans effet (seule la largeur semble s’adapter au fur et à mesure que la page change de taille !).

SI je modifie manuellement la largeur et la hauteur dans le shortcode, comme suit :

devenir

La vidéo devient plus petite, mais ne s’adapte toujours pas à la page.

Je pense avoir compris pourquoi…? Dites-moi si je suis hors piste :

Toute la prémisse de la <video>taille de l’intégration dans WordPress semble être basée surwidth : il existe même une variable globale appelée $content_widthà cet effet, alors qu’il n’y en a pas $content_height.

Plus précisément, voici ce qui se passe dans la wp_video_shortcodefonction :

global $content_width;

// if the video is bigger than the theme
        if ( ! empty( $content_width ) && $atts['width'] > $content_width ) {
            $atts['height'] = round( ( $atts['height'] * $content_width ) / $atts['width'] );
            $atts['width'] = $content_width;
        }

comme vous pouvez le voir ci-dessus, wp ne semble vérifier la vidéo que par rapport à la largeur de la page.

Comment cela peut-il être résolu ?

Solution n°1 trouvée

Pourquoi ne pas utiliser une iframe ? Le code ci-dessous ne nécessitera aucune modification de fichier CSS.

<div style="position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden;">
<iframe type="video/mp4" style="position: absolute; top: 0; left: 0; width: 100%; height: 100%;" src="https://www.youtube.com/embed/BXFLBj5y2A0" frameborder="5px" allowfullscreen="allowfullscreen">
</div>

Selon votre rôle d’utilisateur, WordPress peut supprimer le code iframe lorsque vous l’enregistrez. Cela se produira si vous êtes par exemple un auteur. Voyez si vous pouvez être changé pour un rôle d’éditeur

Solution n°2 trouvée

La réponse courte, je pense, est que WordPress ne peut pas faire de portrait (vidéo) responsive intégrant ‘Out of the box’.

Cependant, vous pouvez obtenir ce que vous voulez dans WordPress avec un codage personnalisé. Ce qui suit est adapté du Twitter Bootstrap Framework, en particulier comme documenté ici : http://getbootstrap.com/components/#responsive-embed

La modification que j’ai apportée est telle qu’elle fonctionne pour une intégration (vidéo) orientée portrait, au format d’image 9:16 (étant donné que votre vidéo est évidemment de 720px x 1280px (= format d’image 9:16)).

HTML :

<div class="container">
  <div class="embed-responsive embed-responsive-9by16">
    <iframe class="embed-responsive-item" src="[URL to your video]"></iframe>
  </div>
</div>

CSS :

.embed-responsive {
    position: relative;
    display: block;
    height: 0;
    padding: 0;
    overflow: hidden;
}

.embed-responsive-9by16 {
    padding-bottom: 177.78%;
}

.embed-responsive .embed-responsive-item, .embed-responsive embed, .embed-responsive iframe, .embed-responsive object, .embed-responsive video {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: 0;
}

Exemple JSFiddle : https://jsfiddle.net/c4akmfxd/ (l’URL de l’iframe dans cet exemple est la première URL à laquelle je pourrais penser qui est à la fois réactive et disponible via HTTPS (nécessaire d’avoir HTTPS avec JSFiddle) (c’est un site Web que j’ai construit appelé ‘Ten Moons’)).

La <divclasse with containern’est qu’un exemple – il peut s’agir de ce que vous voulez avec une largeur appropriée pour y insérer votre portrait – et peut être votre <body>tag ou n’importe quelle partie de votre page Web.

Si vous avez besoin d’un format d’image différent, modifiez simplement (ou créez une nouvelle classe CSS pour) le padding-bottom de la .embed-responsive-9by16classe CSS. Vous pouvez calculer le pourcentage requis comme suit :
height / width * 100(dans votre cas : 1280 / 720 * 100 = 177.78%).

La façon dont vous obtenez cela dans WordPress est un peu une autre affaire – et dépend en grande partie de votre configuration. Vous pouvez modifier le fichier CSS pour ajouter ces classes CSS ; obtenir le HTML dans votre page pourrait être une autre affaire, car WordPress « réécrit » parfois le HTML que vous collez dans la vue HTML et supprime les éléments que vous souhaitez. Mais le JSFiddle prouve que vous pouvez réaliser une intégration de portrait réactif.

FWIW cependant, je ne pense pas que vous ayez besoin de faire quoi que ce soit avec la variable PHP $content_width.

Solution n°3 trouvée

J’ai une approche différente, très simple, laissez ici juste au cas où:

<div class="image-cover" style="background-image: url('YOUR_PORTAIT_IMG'); ">
<video controls class="d-block w-100" poster="TRANSPARENT_1px.png"> 
  <source src="YOUR_VIDEO_SRC" type="video/mp4">
</video>
</div>

Où la classe .image-cover est :

.image-cover {
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
background-attachment: scroll; }

Et les classes « d-block » sont display:block ; et « w-100 » est largeur : 100 % ; (amorcer)

Ainsi, peu importe la taille de la vidéo, puisque le portrait n’est rien (png transparent), l’image visible par le spectateur s’étendra sur toute la zone (couverture).