freoカスタマイズ集

colorboxで表示するYouTube動画を貼り付けるTinyMCEプラグイン をご紹介しましたが、記事に直接埋め込むのはできないのかという声にお応えして別のプラグインをご用意しました。
まあもっともTinyMCEのmediaプラグインを導入すれば出来るんですが(^^ゞ
※以前の記事 を見てYouTube動画をcolorboxで表示させている場合や 前回のプラグイン で動画の埋め込み表示をする場合は こちら を参照してください。

• ダウンロード
  （このプラグインは こちら のプラグインに日本語対応ファイルを入れたものです。TinyMCEを導入している他のブログで使えるかどうかはわかりません）

1. ダウンロードしたファイルを解凍してできた youtube フォルダを tiny_mce/plugins/ フォルダの中に入れてアップします。
2. js/admin.js の「//TinyMCE」以降のうち赤字部分を追加してアップします。

   //TinyMCE
   tinyMCE.init({
   ～（略）～
     plugins: 'advimage,advlink,autosave,contextmenu,fullscreen,inlinepopups,pagebreak,searchreplace,table,visualblocks,youtube',
   ～（略）～
     theme_advanced_buttons2: 'forecolor,backcolor,removeformat,|,link,unlink,image,youtube,charmap,pagebreak,|,search,replace,|,undo,redo',
   ～（略）～

   編集画面にYouTubeアイコンが表示されます。
   
3. YouTubeアイコンをクリックすると「YouTube動画の挿入/編集」ダイアログが出るのでそこにYouTube動画のURLを入れて他の設定があれば設定をし挿入ボタンをクリックします。
   
   ※URLは「https://www.youtube.com/watch?v=xxxxxxxx」の後に文字があってもOKです。
4. YouTubeの動画画面が埋め込まれた状態で表示されます。
   
5. エントリー（またはページ）を登録すると動画が画面が埋め込まれます。
   
6. 埋め込み動画の大きさはダイアログ画面で設定できますが、デフォルトで幅350、高さ300になっており、これを変更したい場合は、tiny_mce/plugins/youtube/youtube.htm の28～29行目にある

   <strong>{#youtube_dlg.ytW}</strong> <input id="youtubeWidth" name="youtubeWidth" type="text" class="text" size="3" value="350" />&nbsp;
   <strong>{#youtube_dlg.ytH}</strong> <input id="youtubeHeight" name="youtubeHeight" type="text" class="text" size="3" value="300" />

   の緑字の数字の部分を適宜変更してください。

※前回のプラグイン で動画の埋め込みをする場合

tiny_mce/plugins/youtube/js/youtube.js の21行目あたりにある

<a class="youtube" href="https://www.youtube.com/v/' + code + '&amp;autoplay=1"><img src="https://img.youtube.com/vi/' + code + '/default.jpg" class="mceItem" alt="' + code + '"/>

の部分を、

<iframe width="480" height="360" src="https://www.youtube.com/embed/' + code + '" frameborder="0" allowfullscreen></iframe>

に変更してアップしてください（widthとheightの数値は適宜決めてください）。

※この場合、colorboxは使用しませんので前回の記事の1.の /templates/header.html の加入・編集は不要です。