エントリー
freoのentry(またはpage)でYouTube動画をcolorboxで表示する場合
- カテゴリー:Colorbox
- タグ:freo画像, freoテンプレート
※この記事の方法より freoでYouTube動画を貼り付けるTinyMCEプラグイン を配布していますのでそちらをご覧ください。
※一応記事は残しておきます。
freoのエントリー(またはページ)にYouTube動画を埋め込むには、記事登録の際にHTMLソース編集画面にYouTube動画の埋め込みコードを貼りつけて登録すればいいのですが、HD動画の場合、width(画面の幅)が640pxにするとエントリーのようなサイドメニューがある場合は、はみ出してしまうので、colorboxを使って表示する方法を紹介します。
- templates/header.html を次のように編集してUPします。
</head>
の上に、
を追加します。{literal} <script> $(document).ready(function(){ $(".complete").colorbox({iframe:true, innerWidth:640, innerHeight:385}); }); </script> {/literal}
- 動画を挿入したい場所で登録画面の「画像の挿入/編集」ボタン(画像の赤丸で囲んだボタン)をクリックします。
- 「画像URL」のところに「https://img.youtube.com/vi/(YouTubeの動画ID)/default.jpg」と入力し、「画像の説明」と「タイトル」のところに適当なタイトルを入力して「更新」ボタンをクリックします。
- 挿入した画像をクリックし、登録画面の「リンクの挿入/編集」ボタン(画像の赤丸で囲んだボタン)をクリックします。
- 「リンクの挿入/編集」ウィンドウが表示されたら、「一般」タブの「リンクURL」のところに「https://www.youtube.com/v/(YouTubeの動画ID)」と入力し、その下の「クラス」のところで「complete」を選択して「更新」ボタンをクリックします。
- 画像に設定が完了したら登録を行います。
登録した記事から画像をクリックすると、
のようにYouTube動画が表示されます(上の画像をクリックすると実物大で表示され雰囲気がよくわかります)。
動画を閉じるには、動画右上の[]をクリックします。
※クラスの部分が「complete」だと分かりにくいので「youtube」にしたいときは
- css/common.css の一番最後に
を追加します。.youtube {
} - 1.の templates/header.html の変更を次のようにします(赤字部分が変更箇所)。
{literal} <script> $(document).ready(function(){ $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:385}); ); </script> {/literal}
- 5.の「リンクの挿入/編集」ウィンドウの「クラス」のところで「youtube」が選択できるようになるので選択して「更新」ボタンをクリックします。
関連エントリー
- 2023/09/05 freoのプロフィールやコメントでGravatarのアバターを表示する方法
- 2018/05/12 freoのエントリーのタグ投稿を楽にする方法
- 2018/03/16 freoのエントリーとページの編集画面で添付ファイルとイメージの画像を表示する方法
- 2018/03/16 freoのエントリーとページの編集画面でオプションの画像を表示する方法
- 2018/02/09 freoのエントリーとページの管理画面に閲覧制限情報を表示する
- 2017/06/10 freoのコメント登録フォームを折りたたむボタン
- 2017/06/10 freoをスマートフォンから見た時にリストのリンクなどをボタン化する
- 2017/05/23 freoの管理用テンプレートをBootstrap3でカスタマイズ
- 2015/04/05 freoで各記事に設定したフィルター名を表示する
- 2014/08/03 freoの注文管理プラグイン画面で投稿者ユーザーの権限を制限する
コメント
- コメントはまだありません。
コメント登録
- コメントを入力してください。
- 一旦登録したコメントは、あとで編集できませんのでご注意下さい。