スマートフォンでボタンをクリックした時にYouTubeを再生する
スマホ向けサイトでYouTubeを埋め込む場合、iPhoneではプレーヤーをタップする形でないと動画を再生することができません. そこで今回は、ボタンをタップしてYouTubeを再生することができないか試してみました。 サンプルコード ボタンと同じサイズで透過したプレーヤーをボタンに重ねて配置することで、タップして動画を再生させることができました。 HTML iPhoneの場合はaタグがYouTubeのプレーヤーに置き換わります。 <div class="btn-wrapper"> <div class="btn">動画を見る</div> <a href="https://www.youtube.com/watch?v=_o4eGTy4atk" id="movie"></a> </div> CSS .btn-wrapper { position: relative; width: 200p
水平線を引くアニメーション
水平線を引くアニメーションの実装をいくつかやってみます。 左から右へ線を引く まずはベタ塗りの線を引いてみます。 HTML <div id="horizon1"></div> CSS #horizon1 { position: absolute; top: 100px; left: 0; width: 0; height: 5px; background: #E74C3C; } JavaScript $(function() { winW = $(window).width(); spped = 3000; $('#horizon1').animate({ width: winW }, spped); }); 線の塗りは背景色で、widthを0から画面幅に広げてアニメーションしています。 左から右へ線を引くデモページ1 ベタ塗りではなく画像で線を引いてみます。 HTML <div id="
レスポンシブWebデザインでタブレット版がないときの対応
レスポンシブサイトを作るときに、タブレットはPC版を表示させたい、といわれることが時々あります。 今回はその対応方法のメモ。 viewportの設定 通常のレスポンシブサイトの場合、 <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1, user-scalable=0" /> だいたいこんな感じでviewportを記述すると思いますが、 この場合、タブレットで見たときに横スクロールバーが出てしまいます。 通常のviewportでのデモページ タブレットでPC版を表示したい場合、横幅をPCサイズに固定する必要があります。 <meta name="viewport" content="width=960" /> 960の部分にPC版の横幅を入れて、表示幅を固定します。 タブレ
1
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
処理を実行中です
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
