昨日ためしてみたyoutube動画埋込みですが、PC表示は問題なかったけど、iphoneからはやっぱり何も表示されない..
ググッてみたらいくつか手段があるみたいなので試してみる。
まずは、freoの作者さんの記事
freoのentry(またはpage)でYouTube動画をcolorboxで表示する場合
よりメモ目的で引用
1)templates/header.htmlを次のように編集してUPします。
</head>の上に
{literal} <script> $(document).ready(function(){ $(".complete").colorbox({iframe:true, innerWidth:640, innerHeight:385}); }); </script> {/literal}を加入します。
2)動画を挿入したい場所で登録画面の「画像の挿入/編集」ボタン(画像の赤丸で囲んだボタン)をクリックします。
3)「画像URL」のところに「http://img.youtube.com/vi/(YouTubeの動画ID)/default.jpg」と入力し、「画像の説明」と「タイトル」のところに適当なタイトルを入力して「更新」ボタンをクリックします。
4)挿入した画像をクリックし、登録画面の「リンクの挿入/編集」ボタン(画像の赤丸で囲んだボタン)をクリックします。
5)「リンクの挿入/編集」ウィンドウが表示されたら、「一般」タブの「リンクURL」のところに「https://www.youtube.com/v/(YouTubeの動画ID)」と入力し、その下の「クラス」のところで「complete」を選択して「更新」ボタンをクリックします。
6)画像に設定が完了したら登録を行います。
登録した記事から画像をクリックすると
YouTube動画が表示されます(上の画像をクリックすると実物大で表示され雰囲気がよくわかります)。
動画を閉じるには、動画右上の[]をクリックします。
※クラスの部分が「complete」だと分かりにくいので「youtube」にしたいときは
7)css/common.cssの一番最後に
.youtube { }を加入してUPします。
8)1)のtemplates/header.htmlの編集を次のようにしてUPします(赤字の部分が変更箇所)。
{literal} <script> $(document).ready(function(){ $(".youtube").colorbox({iframe:true, innerWidth:640, innerHeight:385}); }); </script> {/literal}9)5)の「リンクの挿入/編集」ウィンドウの「クラス」のところで「youtube」が選択できるようになるので選択して「更新」ボタンをクリックします。
をそのまんまやってみたのがこれ。画像をクリックしたらyoutube動画が観れる。。。ハズ!?
追記(覚書):
1)添付画像は横幅は150px程度にしておかないと、、、サイドバーへのリンクがサムネイル化してくれないので思いっきりはみ出るww
2)iphoneでは画像表示→クリック→別ウィンドウが立ち上がるまではいくけど、その先エラーになる。「YouTubeの動画ID」だけじゃなくて"&"以降も入れてみるといけるかな??
→iphoneではやっぱり駄目だった
再度別動画で
さらに追記(2012/02/01)
freoサイト内の下記部分を見劣していた。
最後の文面通りに横幅と高さを150、90みたいに置き換えておくとサイドバー表示がはみ出ることはない筈(これも覚書)。
その設定の上で、上の表示サイズはiphone側の最大横幅 を考慮して幅280px高さ172pxとする。
以下またまた覚書に引用
次に templates/utility.html に、一例ですが以下のコードを追加します。
<div class="utility"> <h3>エントリーギャラリー</h3> <div class="content"> <ul class="gallery"> <!--{foreach from=$plugin_entry_galleries|smarty:nodefaults item='plugin_entry_gallery'}--> <li><a href="{$freo.core.http_file}/view/{if $plugin_entry_gallery.code}{$plugin_entry_gallery.code}{else}{$plugin_entry_gallery.id}{/if}"><!--{if $plugin_entry_gallery.image}--><img src="{$freo.core.http_url}{$smarty.const.FREO_FILE_DIR}entry_images/{$plugin_entry_gallery.id}/{$plugin_entry_gallery.image}" alt="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" title="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" width="{$plugin_entry_gallery_images[$plugin_entry_gallery.id].width}" height="{$plugin_entry_gallery_images[$plugin_entry_gallery.id].height}" /><!--{else}--><img src="{$plugin_entry_gallery_medias[$plugin_entry_gallery.id].file}" alt="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" title="{$plugin_entry_gallery.memo|default:$plugin_entry_gallery.title}" width="{$plugin_entry_gallery_medias[$plugin_entry_gallery.id].width}" height="{$plugin_entry_gallery_medias[$plugin_entry_gallery.id].height}" /><!--{/if}--></a></li> <!--{/foreach}--> </ul> </div> </div>上のコードにある
width="{$plugin_entry_gallery_images[$plugin_entry_gallery.id].width}"とheight="{$plugin_entry_gallery_images[$plugin_entry_gallery.id].height}"に任意の数値を設定すると、強制的にそのサイズで画像を表示することができます。(それぞれ2ヶ所ずつあります。)
