質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

YouTube API

YouTube APIはYouTubeのビデオコンテンツと機能性をウェブサイト、アプリケーション、デバイスに統合することを可能にします。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

Q&A

解決済

2回答

2554閲覧

スマホサイトへのYoutube埋め込み

jackie1993427

総合スコア66

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

YouTube API

YouTube APIはYouTubeのビデオコンテンツと機能性をウェブサイト、アプリケーション、デバイスに統合することを可能にします。

CSS

CSSはXMLやHTMLで表現した色・レイアウト・フォントなどの要素を指示する仕様の1つです。

0グッド

1クリップ

投稿2015/05/20 10:40

初めて質問させていただきます。

会社に入社してすぐの新入社員なのですが、
Webの知識はほぼほぼなく、ページの作成を上司に頼まれ、
行き詰ってしまいましたので質問させてください。

htmlとcssでスマートフォン向けのページを1ページ。
背景画像、ロゴ、Youtubeの動画埋め込み
と、簡単な内容に感じたのですが、Youtubeの埋め込みで、
iPhone6で動作をチェックしたものの、上司のiPhone5のブラウザでは崩れが生じたとのこと

横幅のサイズの問題かとは思うのですが...

index.html

<html> <head> <title>TEST</title> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, minimal-ui"> <link rel="stylesheet" href="css/style.css" type="text/css"> </head> <body> <img src="images/header.png" class="header_pic"> <div class="movie_contents"> <div class="youtube"> <iframe width="640" height="360" src="https://www.youtube.com/embed/(Youtubeの動画ID)?rel=0&amp;controls=0&amp;showinfo=0" frameborder="0" allowfullscreen></iframe> </div> <div class="footer"></div> </body> </html>

style.css

@charset "utf-8";

/ここで背景が固定できないことはわかっているが
固定せずにこのまま背景画像を配置
/
body {
background-image: url(../images/bg.jpg);
background-position: center center;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
background-color: #000000;
}

.header_pic{
display: block;
margin: 0 auto;
}

.movie_contents{
width: 80%;
height: 50%;
display: block;
margin: 10px auto 0 auto;}

.youtube{
}

.youtube iframe{
width:100%;
height:200px;
display:block;
margin:0 auto;
}

.footer{
height: 50px;
}

フッターには特に要素はなく、
後で画像を追加するそうです。

すみませんがご教授いただけると幸いです。
よろしくお願い致します。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答2

0

自己解決

横幅での端末振り分けにしました。
CSSでViewportをwidthで指定し、
指定のwidth以上、指定のwidth未満の端末で表示させるようにいたしました。

投稿2015/05/25 02:38

jackie1993427

総合スコア66

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

0

iPhone5での崩れとは具体的にどんな感じになるのでしょうか?
(横幅がオーバーするとかですかね?)

投稿2015/05/22 15:20

SaoTan

総合スコア12

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

jackie1993427

2015/05/25 02:36

ありがとうございます。 横幅がオーバーしてしまうのが原因でしたがなんとか解決いたしました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問