Support » Plugin: tarteaucitron.js - Cookies legislation & GDPR » Problème avec le style inline du wrapper pour les vidéos

  • Bonsoir !

    J’ai un problème avec le style appliqué à la div qui englobe les vidéos, par l’extension WordPress de tarteaucitron.
    En effet, un attribut style est présent et ajoute height:50vw, ce qui est énorme et ne tient pas compte des dimensions de la vidéo de base.

    
    <div class="vimeo_player" videoid="0123456789" width="100%" height="100%" style="height:50vw;">
      <iframe src="//player.vimeo.com/video/0123456789" allowfullscreen="" width="100%" height="100%" frameborder="0"></iframe>
    </div>
    

    Ainsi, dans un layout en colonne, la vidéo est bien positionnée, mais sa div parente est immense sans vraiment de raison (je précise que dans WordPress, les colonnes utilisent display: flex.

    Y a-t-il une solution à ce problème ?
    Merci

Viewing 7 replies - 1 through 7 (of 7 total)
  • Plugin Author AmauriC

    (@amauric)

    Hello,

    Et en supprimant le height:50vw la vidéo à toujours la bonne taille?

    Si oui je peux le supprimer facilement 😉

    Thread Starter julesalx

    (@julesalx)

    Après quelques tests, si le wrapper n’a pas de hauteur définie, les dimensions de la vidéo ne sont effectivement pas conformes à ce qu’on peut attendre.

    J’imagine que c’est tarteaucitron qui passe sur une iframe dont hauteur et largeur sont à 100% ?
    Parce que sans l’extension, les dimensions de la vidéo importée sont correctes et le ratio est préservé.

    Thread Starter julesalx

    (@julesalx)

    Est-ce que c’est possible, sans toucher au code de tarteaucitron, d’ajouter un hook supplémentaire sur embed_oembed_html pour passer derrière la fonction tarteaucitronjs_oembed_dataparse et changer les dimensions du wrapper en utilisant celles de la vidéo ?

    Plugin Author AmauriC

    (@amauric)

    Dans l’immédiat non 😡

    Thread Starter julesalx

    (@julesalx)

    Je m’en doutais quand j’ai vu le code (PHP_INT_MAX…).

    Je vais regarder pour retirer le filtre et en faire un à ma sauce tout en gardant le JS spécifique de tarteaucitron.

    Si j’ai un peu de temps, je tenterai de faire une pull-request 🙂

    Thread Starter julesalx

    (@julesalx)

    @amauric Voilà de quoi utiliser les dimensions de l’embed fournie par oEmbed.

    
    // Retrait du filtre de tarteaucitron
    remove_filter( 'embed_oembed_html', 'tarteaucitronjs_oembed_dataparse', PHP_INT_MAX, 4 );
    
    /**
     * Dans le cas d'un embed video, on utilise les dimensions fournies par l'embed plutôt que celles imposées par wp_embed_default()
     * @see https://developer.wordpress.org/reference/functions/wp_embed_defaults/
     *
     * @see https://gist.github.com/jlengstorf/ce2470df87fd9a892f68 (Clear oEmbed post-meta cache before using "oembed_dataparse")
     */
    function wrap_oembed_dataparse($return, $data, $url) {
      if($data->type === 'video') {
        $width = $data->width ? $data->width : '100%';
        $height = $data->height ? $data->height : '100%';
    
        if (strpos($url, "youtube.com")) {
          parse_str( parse_url( $url, PHP_URL_QUERY ), $youtube_args );
    
          if ($youtube_args['v'] != "") {
            return "<script>jQuery(function() {(tarteaucitron.job = tarteaucitron.job || []).push('youtube');});</script><div class=\"youtube_player\" videoID=\"".$youtube_args['v']."\" width=\"". $width ."\" height=\"". $height ."\" theme=\"light\" rel=\"0\" controls=\"1\" showinfo=\"1\" autoplay=\"0\"></div>";
          }
        }
    
        if (strpos($url, "vimeo.com")) {
          $id = substr(parse_url($url, PHP_URL_PATH), 1);
      
          if ($id != "") {
            return "<script>jQuery(function() {(tarteaucitron.job = tarteaucitron.job || []).push('vimeo');});</script><div class=\"vimeo_player\" videoID=\"".$id."\" width=\"". $width ."\" height=\"". $height ."\"></div>";
          }
        }
    
        if (strpos($url, "dailymotion.com")) {
          $id = end(explode("/", $url));
      
          if ($id != "") {
            return "<script>jQuery(function() {(tarteaucitron.job = tarteaucitron.job || []).push('dailymotion');});</script><div class=\"dailymotion_player\" videoID=\"".$id."\" width=\"". $width ."\" height=\"". $height ."\" showinfo=\"1\" autoplay=\"0\"></div>";
          }
        }
      }
    
      return $return;
    }
    add_filter( 'oembed_dataparse', 'wrap_oembed_dataparse', 100, 3 );

    A noter que si le cache d’oEmbed n’est pas vide, cela pourrait ne pas avoir d’effet.
    Il faut vider le cache grâce au code fourni ici -> https://gist.github.com/jlengstorf/ce2470df87fd9a892f68#gistcomment-3470089

    Voilà, je pense que tout y est 🙂

    Plugin Author AmauriC

    (@amauric)

    Super, merci!

    Je mets à jour le plugin rapidement 👌

Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Problème avec le style inline du wrapper pour les vidéos’ is closed to new replies.