ホームページ作成パソコンとスマホでユーチューブ動画を最適化

無料ツールソフトの使い方ホームページの作り方Hpで集客する方法グーグルサービス
 
初めてのHP作成の動画SEO実践編高齢者のホームページの作り方よくある質問
 

最短ホームページテンプレートで動画を最適表示させる方法

最短ホームページテンプレートにユーチューブ動画を埋め込む方法について解説します。ホームページに動画を埋め込んだ場合は、スマホサイトでも動画が最適表示されるように設定しておく必要があります。訪問者さんが快適に閲覧できるようにしておきましょう。

 

動画を最適表示させる方法 [この動画は9分で見れます]

 

 

ユーチューブの動画の埋め込みコードを取得する

動画の上で右クリックして「埋め込みコードをコピー」をクリックする。

 

動画の埋め込みコードコピー

 

または、下記画像のように「共有」から「埋め込みコード」をコピーする

 

ユーチューブ動画埋め込み

 

パソコン用テンプレートにコードを貼りつけて横と縦の幅を指定する。

<iframe width="580" height="326" src="動画プレーヤーURL" frameborder="0" allowfullscreen></iframe>

 

最短ホームページテンプレートのメインコンテンツの幅width="580"になっています。ユーチューブ動画の縦横比が16対9なので、縦幅はwidth="326"となります。

 

メインコンテンツ全体に枠を指定している場合、または、動画を枠で囲う場合は、枠から動画がはみ出てしまいます。この場合は指定するサイズを調節します。

 

指定した横幅に0.5625を掛ければ縦幅の大きさが算出できます。

 

スマホ用テンプレートにコードを貼りつける。

スマホ用にユーチューブ動画を貼りつける場合は、サイズの指定をする必要はありません。CSSから画面に合わせたサイズになるようにクラス指定を書き込みます。

 

スマホテンプレートのHTML

コピペでご利用下さい。

<div class="movieinfo">ユーチューブ埋め込みコード</div>

 

スマホサイトで動画の横幅を最適表示させるために、スマホテンプレートの動画の埋め込みコードをクラス指定します。クラス指定というのは、スタイルシート(CSS)で指定した内容を、その専用のDIVタグで囲んだHTML側に反映させるって事です。

 

今回はmovieinfoというクラスをスタイルシートで作成し、その命令内容をCSSに記述し、HTML側(スマホサイト)に指示します。このmovieinfoで囲まれた範囲に命令が反映するって事です。※ movieinfoという名前自体は任意で決めても良いです。

 

クラス指定・・・<div class="movieinfo">

 

スマホ用CSSに追加

コピペでご利用下さい。

/* スマホ動画最適化 */
.movieinfo {
position: relative;
-top: 56.25%;
padding-bottom:30px;
}
.movieinfo iframe {
position: absolute;
top: 0;padding
left: 0;
width: 100%;
height: 100%;

 

スマホのスタイルシートに書き込むソースですが、56.25%というのがポントです。この%は動画の縦横比を定義するものです。

 

ユーチューブの動画表示の縦横比は16対9です。要するに横幅が100%に対して、縦幅56.25%にすると、横幅の大きさに係らず、常に縦横比は16対9になりますよね!

 

またスマホテンプレートのメインコンテンツのテーブルがwidth: 100%;なので、width: 100%;は、結局ブラウザの横幅100%に表示させるという事になります。

 

上記のソースの名前をmovieinfoとしている訳です。これをスタイルシートのクラス名と言います。HTMLのクラス指定した部分だけに、このクラスの命令が反映されます。

 

中身は覚えなくて結構ですので、このような技術がCSSの役割だと考えて下さい。直接HTMLでも指示できますが、CSSは、CSSと呼ばれる外部のファイルから、まとめてある命令をHTMLに指示できるって事です。

 

いま、直接HTMLでも指示できますと書きましたが、上記のCSSのソースを、直接HTMLの動画ごとに書き込んでも良いのですね!でもこの場合はソースは長ったらしくなりますよね。動画をたくさん掲載したいホームページでは、ソースだらけになります!

 

CSSはHTMLのソースを短くできるというメリットがあります。そうする事でSEO対策にもなるって事です。綺麗なソースはグーグルのクローラーが巡回しやすいためです。

 

最短ホームページテンプレートで、スマホサイトテンプレート付きをご購入された方は、こちらのスマホ表示最適化マニュアルもあわせてご活用下さい。

最短ホームページテンプレートでyouTube動画を最適化させる方法の関連ページ

最短テンプレートの構成
綺麗なホームページを作成するための第一条件は表示崩れをおこさない事です、そのためにはまず、テンプレートの構成をおおまかに把握する事です。このコンテンツではHTMLの基本とホームページ構成について解説します。
表示崩れを防止する方法
最短ホームページテンプレートを使うと誰でも簡単にホームページ作成が可能ですが、やはりルールは守る必要はあります。初心者さんに多いミスである、「表示崩れ」をおこさない方法を解説します。
基本的な画像の扱い方
ホームページ作成では画像の扱い方が重要になります。ホームページに画像の表示が反映されないなどのトラブルを解決します。正しい作業の方法を身に付けましょう。
ページ数を増やす方法
最短ホームページテンプレートでは、ページ数を簡単に、無限に増やす事ができます。基本的にはファイルをコピーし、そのファイル名でそのページに対するリンクをメニューなどに作成するだけです。慣れれば分で完了します。
お問い合わせフォーム
最短ホームページテンプレートでは、初心者さんでも簡単にお問い合わせフォームを設置する事ができます。PHPなど複雑なファイルを使用しますが、このテンプレートでは4っのステップで簡単設置!その方法を解説します。
お問い合わせフォームからのスパムを防御する
お問い合わせフォームからのスパムを撃退!ホームページを運営されている方は、ほとんどの場合お問い合わせフォームを設置されています。このお問い合わせフォームを無差別で探し出し、販売などを仕掛けてくるスパムが横行しています。タグの追加でスパムを防止できます。

トップページ ソフトの概要 Hp公開の方法 SEO対策基本編 アクセス解析 特典のご案内 購入者メルマガ お問い合せ