ユーティリティ

2019年12月

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のentry(またはpage)でYouTube動画をcolorboxで表示する場合

※この記事の方法より freoでYouTube動画を貼り付けるTinyMCEプラグイン を配布していますのでそちらをご覧ください。

※一応記事は残しておきます。

freoのエントリー(またはページ)にYouTube動画を埋め込むには、記事登録の際にHTMLソース編集画面にYouTube動画の埋め込みコードを貼りつけて登録すればいいのですが、HD動画の場合、width(画面の幅)が640pxにするとエントリーのようなサイドメニューがある場合は、はみ出してしまうので、colorboxを使って表示する方法を紹介します。

  1. templates/header.html を次のように編集してUPします。
    </head>

    の上に、

    {literal}
    <script>
      $(document).ready(function(){
      $(".complete").colorbox({iframe:true, innerWidth:640, innerHeight:385});
      });
    </script>
    {/literal}
    を追加します。
  2. 動画を挿入したい場所で登録画面の「画像の挿入/編集」ボタン(画像の赤丸で囲んだボタン)をクリックします。
    ファイル 23-1.jpg
  3. 「画像URL」のところに「http://img.youtube.com/vi/(YouTubeの動画ID)/default.jpg」と入力し、「画像の説明」と「タイトル」のところに適当なタイトルを入力して「更新」ボタンをクリックします。
    ファイル 23-2.jpg
  4. 挿入した画像をクリックし、登録画面の「リンクの挿入/編集」ボタン(画像の赤丸で囲んだボタン)をクリックします。
    ファイル 23-3.jpg
  5. 「リンクの挿入/編集」ウィンドウが表示されたら、「一般」タブの「リンクURL」のところに「http://www.youtube.com/v/(YouTubeの動画ID)」と入力し、その下の「クラス」のところで「complete」を選択して「更新」ボタンをクリックします。
    ファイル 23-4.jpg
  6. 画像に設定が完了したら登録を行います。
    登録した記事から画像をクリックすると、
    ファイル 23-5.jpg
    のようにYouTube動画が表示されます(上の画像をクリックすると実物大で表示され雰囲気がよくわかります)。
    動画を閉じるには、動画右上の[close]をクリックします。

※クラスの部分が「complete」だと分かりにくいので「youtube」にしたいときは

  1. css/common.css の一番最後に
    .youtube {
    }
    を追加します。
  2. 1.の templates/header.html の変更を次のようにします(赤字部分が変更箇所)。
    {literal}
    <script>
      $(document).ready(function(){
        $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:385});
      );
    </script>
    {/literal}
  3. 5.の「リンクの挿入/編集」ウィンドウの「クラス」のところで「youtube」が選択できるようになるので選択して「更新」ボタンをクリックします。
    ファイル 23-6.jpg

ページ移動

関連エントリー

コメント

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

コメント登録

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