アダルトアフィリエイト実践記

CSSを使ってサンプル動画をレスポンシブ対応にする方法

 


アダルトアフィリエイトをする際、ASPが提供するサンプル動画を使用することがあると思います。

動画埋め込みコードを取得してサイトに貼り付けるだけなのですが、そのままだとスマートフォンで閲覧した場合、動画がはみ出して、全体が表示されなくなってしまいます。

ワードプレスプラグインも探してみたのですが、良いものが見つかりませんでした。

そこで、CSS(スタイルシート)利用して、サンプル動画をスマートフォンで閲覧しても、全体がうまく表示されるレスポンシブ対応にする方法を見つけましたのでご紹介します。

サンプル動画コードをそのまま貼り付けてスマートフォンで閲覧するとはみ出してしまう

カリビアンコムでもモザイク加工が施されたサンプル動画を利用できることが分かったので、早速これまでテレアポサイトに投稿してきたカリビアンコムの動画紹介記事にサンプル動画を埋め込む作業を始めました。

カリビアンコムで修正済み(モザイクあり)のサンプル動画を貼り付ける方法

サンプル動画を記事に貼り付ける作業をしているうちに、ふと気が付いたことがあります。

「あれ?スマートフォンで見たらどうなるの?」と。

そこでスマートフォンの画面サイズでプレビューできる「Responsive Post Preview」を使って、プレビューしてみると、

douga cyousei 04

本来このように全体が表示されるはずが、、、

douga cyousei 05

あらら、やっぱりサンプル動画がはみ出てしまって上手く表示されていません。

これではスマートフォンでの訪問者に閲覧してもらえません。

テーマ自体がレスポンシブ対応をしていても、貼り付けたサンプル動画の表示サイズは自動調整されないようです。

CSSを利用してサンプル動画をレスポンシブ対応にする方法

参考にしたのはこちらのグーグルの記事です。

「動画のサイズを正しく設定する」

https://developers.google.com/web/fundamentals/design-and-ui/media/video/size-videos-correctly?hl=ja

以下、サンプル動画のレスポンシブ対応の方法です。

■ワードプレス「外観」→「テーマの編集」をクリック

■スタイルシートをクリック

■スタイルシートに以下のコードを記述(コピペ)します

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

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

■記事投稿画面で「テキストモード」を表示します

■「テキストモード」に取得したサンプル動画コードをペーストします

<script name="setAffplayer000000-000" id="setAffplayer000000-000" type="text/javascript" src="http://affiliate.dtiserv.com/js/setAffplayer.js?affid=000000&siteid=0&video=http://smovie.caribbeancom.com/sample/movies/000000-000/720p.mp4&img=http://www.caribbeancom.com/moviepages/000000-000/images/l_l.jpg&w=450&h=273&url=www.caribbeancom.com&id=000000-000&m_flag=0"></script>

■そのサンプル動画コードを<div class="video-container"></div>で囲みます

<div class="video-container"><script name="setAffplayer000000-000" id="setAffplayer000000-000" type="text/javascript" src="http://affiliate.dtiserv.com/js/setAffplayer.js?affid=000000&siteid=0&video=http://smovie.caribbeancom.com/sample/movies/000000-000/720p.mp4&img=http://www.caribbeancom.com/moviepages/000000-000/images/l_l.jpg&w=450&h=273&url=www.caribbeancom.com&id=000000-000&m_flag=0"></script></div>

■更新します

これで完了です。

スマートフォン画面でプレビューしてみると、

douga cyousei 03

このようにバッチリと調整されてサンプル動画全体が表示されました。

補足

■ワードプレスプラグインに「Advanced Responsive Video Embedder」と言うプラグインがあって試してみたのですが、DTIのサンプル動画は上手くいきましたが、SBSのフラッシュ動画広告で上手くいきませんでした。

■アダルトアフィリエイトでモザイク加工済のサンプル動画を提供しているのはDTIとSBSです。

紹介した方法で両サイトのサンプル動画コードで試してみましたが、両サイトとも上手く表示することができました。

■あまりスタイルシートについてはよくわかっていないので、実施する場合は自己責任でお願いします^^;。

■一つ問題があって、パソコン画面で閲覧して場合も、サイズ指定に関係なく100%のサイズで表示されてしまいます。

それでも、スマートフォンで閲覧した際にはみ出してしまっているよりは良いので、しばらくはこの方法で対応していきます。

■テーマをカスタマイズしているため、テーマをアップグレードする度にスタイルシートを書き換える必要があります。

まとめ

グーグルでも今年(2015年)に入って、「モバイル・フレンドリー・アップデート」なるものを実行したそうです。

要はスマートフォン対応できていないサイトは検索順位が下がってしまうんだそうです。

せっかくスマホからの訪問者が来ても、サンプル動画がはみ出してしまっていたら、速攻で離脱してしまいますよね。

わずかなアクセスでも無駄にしないで、少しでもPVを上げてグーグルの評価を上げたいところです。

 

アダルトアフィリエイト便利技   3

この記事に関連する記事一覧

コメントは3件です

  1. サンクス より:

    これが知りたかった。助かりました。ありがとうございます!

  2. スギノ より:

    俺も成功しました!

コメントフォーム

名前

 

メールアドレス

 

URL

 

 

コメント

トラックバックURL: