2016-09-10 12 views
0

ウェブページにビデオが埋め込まれています。ビデオのタイトルの下に、h2ヘッダータグで囲まれています。ビデオの下にはPタグで囲まれたテキストもあります。私はビデオを反応的にして、ユーザーが携帯電話を使ってビデオを見ることができるようにしました。しかし、ヘッダータグと段落タグをどのように応答させるかわかりません。 h1タグが携帯電話のサイズに対して大きすぎます。私はフォントのサイズを画面の幅に基づいて小さくします。私のビデオの下でテキストを反応させるにはどうしたらいいですか? responsive videoビデオの下でHタグとPタグを反応させるにはどうすればいいですか?

は、これはコードです:H1とpタグのスタイルを処理するために

<!DOCTYPE html> 
<html> 
<head> 
    <title>Responsive design</title> 
<link type="text/css" rel="stylesheet" href="main.css"/> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<style> 
.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%; 
} 


.another-container { 
    max-width: 600px; 
    display: block; 
    margin-left: auto; 
    margin-right: auto 
} 

</style> 
</head> 
<body> 
<div class="another-container"> 
<div class="video-container"> 
<iframe width="560" height="315" src="https://www.youtube.com/embed/Ggh_y-33Eso" frameborder="0" allowfullscreen></iframe> 
</div> 
<h1>Learn HTML in 15 Minutes</h1> 
<p> Learning html is the foundation for all great webmaster</p> 
</div> 

</body> 
</html> 
+0

「レスポンシブテキスト」とはどういう意味ですか?テキストが新しい行に折り返すようにしたいのですか(または既に行っているので)、フォントのサイズを画面の幅に基づいて小さくしますか? –

+0

レスポンシブの意味を定義してください。コードはうまくいくように見えますが、私はそれが何をしていないのか分かりません。 –

+0

h1タグが携帯電話のサイズに対して大きすぎます。私はフォントのサイズを画面の幅に基づいて小さくします。 –

答えて

関連する問題