Accentsconagua

Petit conseil votre propre shortcode vidéo

Code
Share

Vous utilisez probablement un plugin d'intégration vidéo ou vous utilisez simplement les codes d'intégration des sites vidéo. Mais il existe un troisième moyen, plus simple, d’incorporer des vidéos dans votre site WordPress: un shortcode vidéo simple (mais utile)..

Pourquoi devrais-je utiliser un shortcode vidéo??

  • Parce que les plugins d'intégration vidéo ne sont qu'un fardeau supplémentaire pour votre blog. Ils prennent un peu de place sur votre disque (pas plus de 1 Mo), ils interrogent toujours votre base de données pour connaître leurs options et vous devez apprendre comment utiliser les plugins.
  • Parce que l’incorporation des codes des sites vidéo peut être corrompue - en particulier lorsque vous passez de l’éditeur WYSIWYG à l’éditeur HTML.
  • Et surtout: parce que les codes courts sont géniaux! Ils sont faciles à utiliser, ils peuvent avoir les fonctionnalités de nombreux plugins et leur code ne casse pas dans vos posts!

Explorer les sites vidéo

Nous allons travailler avec 7 sites d'hébergement de vidéos:

  1. YouTube (évidemment!)
  2. Vimeo
  3. Dailymotion
  4. Yahoo! Écran
  5. Blip.tv
  6. Veoh
  7. Viddler

Voyons à quoi ressemblent leurs codes d'intégration:

Youtube

Le code d'intégration par défaut ressemble à ceci:

 / * Vidéo originale: youtube.com/watch?v=dQw4w9WgXcQ * /

Mais il y a une option, le "mode optimisé pour la confidentialité" qui ajoute "-nocookie" au domaine et nous allons l'utiliser dans notre shortcode.

Vimeo

 / * Vidéo originale: vimeo.com/36804448 * /

Simple et élégant C'est pourquoi les gens aiment Vimeo.

Dailymotion

 / * Vidéo originale: dailymotion.com/video/xhwpbg_bridgestone-15-sec-spot_auto * / 
BridgeStone spot de 15 secondes par DailymotionUSA

Je pense que l'ajout d'un lien sous le code d'intégration est juste pas cool, donc nous n'ajoutons pas cela à notre shortcode.

Yahoo! Écran

 / * Vidéo originale: screen.yahoo.com/mysterious-death-of-500-fish-in-german-lake-blamed-on-urinating-swimmers-29322943.html * /

Le code intégré est un peu bizarre sur Yahoo! Écran mais j'ai trouvé un moyen de le raccourcir qui sera plus facile à utiliser dans notre shortcode.

Blip.tv

 / * Vidéo originale: blip.tv/mister-glasses/episode-7-5600357 * /

Il s'agit d'un problème difficile. L'ID de la vidéo (à partir de l'URL de la vidéo) ne figure pas dans le code d'intégration. Mais grâce à des recherches, j'ai compris comment utiliser cet identifiant! :)

Veoh

 / * Vidéo originale: veoh.com/watch/v27458670er62wkCt * / 
Regarder Intense Cat chez les animaux | Voir plus de vidéos gratuites en ligne sur Veoh.com

Ah la tag… Ne vous inquiétez pas, nous n'allons pas l'utiliser!

Viddler

 / * Vidéo originale: viddler.com/v/978c9ba2 * /

C'est tout. Passons maintenant à la partie amusante!

Le Shortcode: [vid]

Nous allons créer 4 attributs pour ce shortcode - le nom du site, l'ID de la vidéo et la largeur et la hauteur de la vidéo. Vous pouvez définir des valeurs par défaut pour les attributs:

 function vid_sc ($ atts, $ content = null) extract (shortcode_atts (array ('site' => 'site' => 'youtube', 'id' =>, '=' ">," w '=> "400', 'h' => '250 '), $ atts)); add_shortcode (' vid ',' vid_sc ');

Vient ensuite la partie où la fonction génère le $ src variable qui génère le src attribut pour le iframe:

 // YouTube avec "mode renforcé de confidentialité": if ($ site == "youtube") $ src = 'http://www.youtube-nocookie.com/embed/'.$id;  // Vimeo: else if ($ site == "vimeo") $ src = 'http://player.vimeo.com/video/'.$id;  // Dailymotion: else if ($ site == "dailymotion") $ src = 'http://www.dailymotion.com/embed/video/'.$id;  // Yahoo! Écran avec quelques coupures dans l'URI: else if ($ site == "yahoo") $ src = 'http://d.yimg.com/nl/vyc/site/player.html#vid='.$id ;  // Blip.tv avec quelques "hacks" dans l'URI: else if ($ site == "bliptv") $ src = 'http://a.blip.tv/scripts/shoggplayer.html#file=http : //blip.tv/rss/flash/'..idid;  // L'URI Veoh a aussi quelques astuces: else if ($ site == "veoh") $ src = 'http://www.veoh.com/static/swf/veoh/SPL.swf?videoAutoPlay= 0 & permalinkId = '. $ Id;  // Viddler: else if ($ site == "viddler") $ src = 'http://www.viddler.com/simple/'..idid;

Et bien sur, nous revenir le résultat. Voici le code complet de notre tout nouveau shortcode vidéo:

 function vid_sc ($ atts, $ content = null) extract (shortcode_atts (array ('site' => 'site' => 'youtube', 'id' => ',' id '=> ",' w '=>' 600 ',' h '=>' 370 '), $ atts)); if ($ site == "youtube") $ src =' http://www.youtube-nocookie.com/embed/'.$id; else if ($ site == "vimeo") $ src = 'http://player.vimeo.com/video/'.$id; else if ($ site == "dailymotion") $ src =' http: //www.dailymotion .com / embed / video /'.$ id; else if ($ site == "yahoo") $ src = 'http://d.yimg.com/nl/vyc/site/player.html#vid = '. $ id; else if ($ site == "bliptv") $ src =' http://a.blip.tv/scripts/shoggplayer.html#file=http://blip.tv/rss /flash/'.$id; else if ($ site == "veoh") $ src = 'http://www.veoh.com/static/swf/veoh/SPL.swf?videoAutoPlay=0&permalinkId=' . $ id; sinon if ($ site == "viddler") $ src = 'http://www.viddler.com/simple/'.$id; if ($ id! = ") return'';  add_shortcode ('vid', 'vid_sc');

Conseil dans le conseil: notez que le iframe a deux classes CSS: vid et iframe- $ site (par exemple. iframe-youtube). Vous devriez ajouter vid border: 0; à votre fichier CSS puisque nous n'avons pas défini la bordure de cadre attribuer à notre iframe étiquette.

Exemples d'utilisation

L'utilisation par défaut est assez simple:

[vid site = "youtube" w = "600" h = "340"]

Mais pour le rendre encore plus simple, nous définissons des valeurs par défaut pour site, w et h. Donc, si vous souhaitez intégrer une vidéo YouTube, vous pouvez simplement l'utiliser comme ceci:

[vid]

Vous devriez changer la largeur et la hauteur pour correspondre à votre blog. De plus, si vous utilisez plus Vimeo que YouTube, vous pouvez modifier la valeur par défaut. site valeur pour "vimeo".

C'est tout! Ajoutez ceci à votre functions.php fichier et vous pouvez commencer à utiliser le shortcode. Prendre plaisir!

Mise à jour: nous avons ajouté une section d’exemples d’utilisation à l’article pour clarifier les choses..

Code
×