Espace vide ajouté lorsque l'option Remplacer l'iframe Youtube par une image d'aperçu est activée.

Problème

Un grand espace vide est ajouté au-dessus ou au-dessous de l'iframe vidéo YouTube lorsque Remplacer l'iframe Youtube par une image d'aperçu de l'onglet Média est activée. 

Cause

Le problème se produit lorsqu'un style personnalisé est appliqué au conteneur iframe et qu'il possède des propriétés CSS qui ajoutent un espacement pour maintenir le rapport d'aspect. Les valeurs ne se rencontrent pas pour toute image placée dans le conteneur iframe. Lorsque vous activez la fonction  Remplacer l'iframe Youtube par une image d'aperçu, cet espacement est ajouté au-dessus ou au-dessous de l'image de prévisualisation.

Comment vérifier le CSS de l'iframe ?

Inspectez l'élément iframe vidéo avec les outils de développement de votre navigateur et vérifiez les déclarations CSS correspondantes, comme dans la capture d'écran ci-dessous :

Les déclarations CSS courantes qui provoquent cet espace vide sont les suivantes :

• aspect-ratio comme dans l'exemple ci-dessus ;
• padding ajouté en pourcentage comme dans l'exemple ci-dessous :

Solutions

• Utilisation de blocs Gutenberg standard dans WordPress pour placer la vidéo.
  Les blocs Gutenberg standard dans WordPress n'ont pas les déclarations de rapport d'aspect CSS. À moins que le thème ne l'écrase, vous devriez être en mesure d'utiliser les blocs vidéo YouTube dans WordPress sans ce problème.
• Les utilisateurs du thème Avada peuvent activer l'option "Video Facade" dans les paramètres du bloc vidéo YouTube d'Avada Builder pour résoudre le problème :

• Contactez le support de votre thème pour savoir comment désactiver ces règles CSS. 
  

  Par exemple, dans le cas présenté ci-dessus, le correctif CSS fourni par l'équipe d'assistance d'Oxygen Theme et spécifique à Oxygen Theme, est:

  .ct-video > .oxygen-vsb-responsive-video-wrapper {
  padding-bottom:unset!important;
  }