ユーティリティ

2017年08月

- - 1 2 3 4 5
6 7 8 9 10 11 12
13 14 15 16 17 18 19
20 21 22 23 24 25 26
27 28 29 30 31 - -

キーワード検索

キーワード検索フォーム
キーワード

ユーザー

  • cccのアバター

新着画像

過去ログ

Twitter

Twilogを見る

Feed

エントリー

freoでYouTube動画を貼り付けるTinyMCEプラグイン(埋め込み表示)

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アイコンが表示されます。
    ファイル 46-1.jpg
  3. YouTubeアイコンをクリックすると「YouTube動画の挿入/編集」ダイアログが出るのでそこにYouTube動画のURLを入れて他の設定があれば設定をし挿入ボタンをクリックします。
    ファイル 46-2.jpg
    ※URLは「http://www.youtube.com/watch?v=xxxxxxxx」の後に文字があってもOKです。
  4. YouTubeの動画画面が埋め込まれた状態で表示されます。
    ファイル 46-3.jpg
  5. エントリー(またはページ)を登録すると動画が画面が埋め込まれます。
    ファイル 46-4.jpg
  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="http://www.youtube.com/v/' + code + '&amp;autoplay=1"><img src="http://img.youtube.com/vi/' + code + '/default.jpg" class="mceItem" alt="' + code + '"/>

の部分を

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

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

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

ページ移動

関連エントリー

コメント

  • コメントはまだありません。

コメント登録

  • コメントを入力してください。
  • 一旦登録したコメントは、あとで編集できませんのでご注意下さい。
登録フォーム
名前
メールアドレス
URL
コメント(コメント本文の装飾について
閲覧制限
※基本的には「全体に公開」されますが、内容によっては管理人の方で公開を制限する場合がございますので、その旨ご了承下さい。
freoをひらがな3文字で入力してください(スパム対策)