タグ別アーカイブ: ホームページ

YouTube動画をスマホサイト(iphoneでも)にも表示させる方法

YouTubeに動画をアップし、その動画をPCサイトに掲載、ここであまりつまづく人は、いないかな~と思いますが、スマホサイトにも掲載されているつもりだったのに、ある日、iphoneユーザーの友人から、「動画ないね、真っ白やね~」なんて言われて、びっくり!という方、日本中に7人くらいは、いるのでは?

はい。私がその7人中の1人です。  :-(

と、いうことで、国内にあと6人ぐらいはいるであろう私と同志のあなたに向けて、張り切ってご紹介します~。

 

スマートフォン用のサイトでyoutube動画を埋め込むとき、以前使われていたコード(object)で埋め込むと、iPhoneのブラウザ(safari)で見られない場合があります。

スマートフォンブラウザでも見られるようにするために、下記の方法をご紹介します。
youtube01

(1)動画の埋め込みコード
(2)埋め込みオプション

(3)動画の表示サイズ

▼まず、埋め込みたい動画のページに移動し、動画の下部にある【共有】(青枠)をクリックします。
クリックすると埋め込みコードの設定エリアが表示されます。

▼     動画の埋め込みコードを取得する際に、(2)の埋め込みオプションの

【動画が終わったら関連動画を表示する】
【プライバシー強化モードを有効にする】

にチェックを入れる。
(【以前の埋め込みコードを使用する】にチェックを入れると古いコード(object)になってしまうので入れないでください。)

▼(1)の埋め込みコードを、(3)の動画の表示サイズを指定するタグ削除してから、コピーします。

例)
<iframe src=”//www.youtube-nocookie.com/embed/0pZNJd4YGVQ” frameborder=”0″ allowfullscreen></iframe>

(スマートフォンから見たときに動画の表示サイズを可変させるために動画の表示サイズタグを削除します。このタグを残していると表示サイズを優先させて、モニタサイズをはみ出して表示させる場合があるからです。)

▼PC、スマートフォン、どちらから見てもいいように、動画の表示サイズを自動的に可変させるために、次にコピーしたコードに以下のタグで囲んでやります。
<div class=”video-container”>コピーした埋め込みコード</div>
実際のコード例は下記になります。

<div class="video-container">
<iframe src="//www.youtube-nocookie.com/embed/0pZNJd4YGVQ" frameborder="0" allowfullscreen></iframe>
</div>

▼次にスタイルシートの指定をします。
cssの記述は以下になります。

.video-container {
 position: relative;
 padding-bottom: 56.25%;
 padding-top: 30px;
 height: 0;
 overflow: hidden;
}

.video-container iframe {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}

このスタイルシートを追加すれば、PCサイト、スマホサイト(iPhone)に関わらず、モニタ(ブラウザ)のサイズに合わせて表示サイズを可変させることができます。

是非、活用してみてくださいね。

 

制作実績の多さをアピールしているホームページ制作会社って凄くね?

制作実績が4000件!6000件!と主張しているホームページ作成会社があります。
すごい!凄すぎる~なんて、本当はこれぽっちも思ってません ;-)

例えば、制作実績が4000件だとして、日本にサイト制作を請け負うというビジネスが誕生した、
約20年前からホームページ請負作成をし、コンスタントに制作完了していた、会社設立当初から、
今と同じ受注があったと、平均的に考えて、年間200サイト。
月間すれば、約16~17サイトという数になります。

売れるホームページは、工場でつくる製品のように大量生産ができるようなものではありません。
1人のWEBコンサルタントが、しっかり調査を行い、その企業やサービスの強みを分析して、表現方法を考える、企画できる数は、多くて月間3サイトぐらいが限度かと。。。

制作実績が4000件!この凄さ、と裏腹にあるもうひとつのこと、
じっくり考えるとおわかりになると思います。
制作実績の多さをアピールしている会社は、金太郎飴のようにサイトを量産している会社だと。

「我々は、クライアントのビジネスがホームページによって良い方向に
進むことには、まったく興味はありましぇ~ん」
「ただひたすらに、カタログのような、企業概要のパンフをhtml化したようなものを量産することに集中しています」
と、言ってるように聞こえませんか?

ちょっとトゲありすぎですね。ごめんなさい。
そういうホームページを望んでいらっしゃるクライアントさんのサイトなら問題ないですもんね。

 

そんなビジネスモデルに限界を感じたホームページ制作会社さん、WEB制作技術者さん、
そして、そんな会社さんとのお取引きを、そろそろ見直したいとお考えの経営者のあなた。
一度しっかり、勝つべくして勝つホームページとは、どのようなプロセスを通して生み出されるのかを学んでみませんか?

 

成功するホームページの絶対条件
「選ばれる理由」 USP構築セミナー

セミナー日程決定しだい、ご報告しますね。

 

 

<追伸>
副題、どうしようか思案中、、どれが刺さる?と思いますか?

・勝つべくして勝つのは、ライバルがこのプロセスを踏んでないから
・君は1000% 失敗するためにデザインを重視してる Byカルロストシキとオメガとライブ
・USPで尖がること それが一番大事 By 大事マンブラザーズ
・飾りじゃないのよホームページは By 中森明菜

やっぱりバリバリ昭和おやじの中井としては、明菜バージョンかな~。
昨晩ね、仲良しのクライアントさんがわざわざ、小松まで来てくれて、戦略会議と称して、6時ごろから1時すぎまで飲んでました。

バリバリって言う人って40歳以上限定!って飲み屋のお姉さんに言われちった。。 :oops:

 

<追伸>
私も数年程前にスタッフ数名と1000サイト以上を運用してました。300近いサーバーをレンタルして。。
今となっては、超ブラックなSEO対策用の衛星サイトですが。。