web-dev-qa-db-fra.com

Comment contrôler la taille d'affichage des médias vidéo avec le lecteur wordpress player natif)

J'espérais utiliser le lecteur vidéo natif wordpress, mais j'aimerais "étendre" la taille de la vidéo sur la page. Est-ce possible? Je n'arrive pas à faire fonctionner ça.

Taille réelle de la vidéo MP4 = 640 x 360 mais j'aimerais qu'elle s'agrandisse/s'étire sur l'écran à une taille 1,5 fois. En fait, la vidéo se réduit à une largeur de 474 px sur la page!

Je teste cela sur un site Web simple, en utilisant le thème Twenty Fourteen, WordPress 4.0. En mode d'affichage, je vois

<div class="wp-video" style="width: 474px; height: 267px; ">
  <div id="mep_0" class="mejs-container svg wp-video-shortcode mejs-video" style="width: 474px; height: 266px;">
    <div class="mejs-inner">
      <div class="mejs-mediaelement">
        <div id="me_flash_0_container" class="me-plugin">
          <video id="video-785-1" class="wp-video-shortcode" width="474" height="266" preload="metadata" tabindex="0" style="display: none; width: 100%; height: 100%;">
          <source src="http://mywebsite.com/wp-content/uploads/2014/09/Video.mp4?_=1" type="video/mp4"></source>
          <a href="http://mywebsite.com/wp-content/uploads/2014/09/Video.mp4">http://mywebsite.com/wp-content/uploads/2014/09/Video.mp4</a>
          </video>
        </div>
      <div class="mejs-layers">...

Je n'ai aucune idée d'où vient la largeur de 474 ... Remarque: la vidéo s'affiche en 640 x 360 sur la page de support d'administration WP. Les outils multimédias natifs wordpress ne semblent pas offrir d'options pour la largeur d'affichage. J'ai essayé d'écraser les paramètres via CSS, mais rien n'a de sens. Quelqu'un était déjà venu ici? Comment contrôler la taille d'affichage de ma vidéo? Merci beaucoup, Zip

Mise à jour: je patauge dans WordPress core, et je vois un fichier media-template.php avec le code:

settings = wp.media.view.settings;

if ( settings.contentWidth && data.model.width >= settings.contentWidth ) {
    w = settings.contentWidth;
} else {
    w = data.model.width;
} 

et plus tard, je vois où cela est collé dans la ligne de sortie <div class="wp-video" ... Je ne comprends toujours pas exactement ce qui se passe et pourquoi.

Mise à jour # 2: J'ai pris les informations VanCoder ci-dessous, créé un thème enfant, écrasé le paramètre $ content_width variable = 474 dans functions.php et corrigé la ligne de code div class = "wp_video". corrige la ligne suivante, donc la vidéo est encore petite. En fait, lorsque la page se charge pour la première fois, vous pouvez voir la vidéo en grand, puis après une fraction de seconde, elle réduit à nouveau la taille. La ligne suivante <div id="mep_0" class="mejs-container svg wp-video-shortcode mejs-video" style="width: 474px; height: 266px;"> Semble être générée à partir d'un fichier javascript réduit (je crois mediaelement-and-player.min.js) mais c'est très laid. C'est tellement laid qu'il est difficile de le résoudre dans le navigateur. Toutes les variables sont réduites à un seul caractère. (Insérez vos propres adjectifs Word à quatre lettres ici.) Quelqu'un d'autre est venu ici?

Mise à jour # 3: J'ai quitté le travail et ouvert ce site à la maison. Le problème avec le dimensionnement incorrect sur l'erreur div id = "mep-0" a totalement disparu. Je vois maintenant la vidéo dans sa taille native (640 x 360). Je ne sais pas ce qui s'est passé, je suppose qu'un fichier a été bloqué dans le cache local sur la machine au travail. Travail = bureau Mac, maison = ordinateur portable Win8. Je suis donc à mi-chemin fixe. Je ne sais toujours pas comment agrandir la vidéo au-delà de la taille native.

Je peux agrandir la vidéo localement et la stocker sur un support, puis obtenir un affichage plus grand, mais cela semble un gaspillage de bande passante. À ce stade, je pense que c'est ma seule solution.

1
zipzit

Le lecteur vidéo utilise le $content_width variable, que vous trouverez dans functions.php dans le thème. Le $content_width définit le meilleur ajustement pour les médias sur un thème particulier, donc cela devrait être le meilleur ajustement pour vingt-quatorze. Vous définiriez votre propre valeur dans votre propre thème.

1
vancoder