Deprecated: Array and string offset access syntax with curly braces is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/script-loader.php on line 757

Deprecated: Array and string offset access syntax with curly braces is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/script-loader.php on line 757

Deprecated: Array and string offset access syntax with curly braces is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/script-loader.php on line 758

Deprecated: Array and string offset access syntax with curly braces is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/script-loader.php on line 758

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/load.php on line 926

Notice: Trying to access array offset on value of type bool in /home/users/2/ymd3004/web/3004.jp/wp-includes/theme.php on line 2360

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798
YouTubeなどの埋め込み動画のレスポンシブ対応にする | Yamada3004(やまだみちよ)Yamada3004(やまだみちよ)
Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

YouTubeなどの埋め込み動画のレスポンシブ対応にする


Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

モバイルフレンドリーのアルゴリズム変更のおかげで、レスポンシブ案件が
モリモリのやまだです(=゚ω゚)ノ

どもども。お久しぶりの更新でございます。
前回、複数のYouTube動画をページを変えず、そのエリアで切替えて再生(IFrame編)という記事を書きましたら、これをレスポンシブ対応したいというお問い合わせがきましたので、やってみました。

YouTube動画の画面が、私のAndroidくんだとただ真っ黒に表示するだけになってしまうので、これを修正。
さらに、画面がはみ出してレイアウトが崩れてしまうのでこれも調整します。

まずは、jsファイルの見直し。
どうやら「iframe 組み込みの YouTube Player API リファレンス」のモバイルの注意事項にあるように、モバイルでは開いた瞬間に自動再生させないようなのでイベントで自動再生させないように、47行目あたりをコメントアウト。
最初に開いた瞬間の自動再生はできませんが、これで画面が表示され、曲リストクリックすると自動再生されます。

次にレイアウト。
CSSで動画(iframe)をレスポンシブ化させます。
id=”player”に画面が表示されるので、それをclass=”movie_center”で囲って下さい。こんな感じ

<div class="movie_center">
<div id="player"></div>
</div>

CSSはこれ↓

.movie_center {
	position: relative;
	padding-bottom: 56.25%;
	padding-top: 30px;
	height: 0;
	overflow: hidden;
	margin: 0 auto 24px 0;
}
.movie_center iframe{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}

これでこいつも↓レスポンシブになったはず!

あ!このサイトがレスポンシブじゃなかった。ダメじゃんw
こちらをご覧ください!

近々、スマホ対応しますのでお待ちを(ほんとに~?)

スマホ対応、レスポンシブにしました!!

この記事をシェアする

関連記事

CATEGORY

SEARCH

PROFILE

歌って踊れる、人見知りなWeb屋。
服とお酒と音楽がスキである(`・ω・´)
PROFILEを見る →

TAGS


Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798

Deprecated: Function get_magic_quotes_gpc() is deprecated in /home/users/2/ymd3004/web/3004.jp/wp-includes/formatting.php on line 4798