assignment Boards
CSSの質問をしたり答えたりする掲示板
2019-01-30に作成
CSSに関する質問を何でもしていい掲示板です。匿名での投稿も可能です。BootstrapやBulma等のCSSフレームワークなども良いと思います。どんなことでもどしどし書き込んでください。回答もどなたでも自由にできます。僕も回答できる内容であれば必ず回答します！
質問は下記に沿って書いていただくと回答しやすくなります。
- 実際のソースコードがある場合、可能な範囲で書いていただくと問題点を見つけやすくなります。
- 実際に発生したエラーメッセージがある場合、コピペしていただくと問題解決につながる可能性が高いです。
- 見た目上の問題の場合、スクリーンショットを貼ると状況が把握しやすくなります。
横並びで高さを youtube iframe に合わせたい
背景にニュースが流れている時計、のようなアプリをつくろうとしています
こんな感じ の、背景にニュースが流れている時計をつくろうとしています
画面は、youtube を再生する player と、再生チャンネルを決める panel を 横並びにして、その下に時計 clock を表示しています
<div class="container" style="display:flex;">
<div id="player"></div>
<div id="panel">
</div>
<h1 id="clock"></h1>
player の高さは window の height から動的に指定していて、panel は固定サイズです
こんな感じの表示になります↓
ここで、flex-container の高さを、高いほうの子要素ではなく常に player の高さに揃え、panel が切れたときにはスクロールするようにしたいのですが可能でしょうか？
いくつか（panel の height を 0 にして overflow: auto をつける、panel のpadding に巨大な数を指定してから引く）試してみたのですが、どれもうまくいかず（scroll バーがでない、panel が表示されない）ご相談させていただきました次第です
ご参考まで、全体は以下です
<!DOCTYPE html>
<html>
<body>
<!-- <script>document.write("innerHeight = " +window.innerHeight);</script> -->
<!-- <script>document.write("innerWidth = " +window.innerWidth);</script> -->
<!-- 1. The <iframe> (and video player) will replace this <div> tag. -->
<div class="container" style="display:flex;">
<div id="player"></div>
<div id="panel">
<div>
<button onclick='playYT("lrX6ktLg8WQ");'>
<img src="http://i.ytimg.com/vi/lrX6ktLg8WQ/sddefault.jpg" width="64"/>
<br>Sky News live<br>
lrX6ktLg8WQ
</button>
</div>
<div>
<button onclick='playYT("5avbHxRppxo");'>
<img src="http://i.ytimg.com/vi/5avbHxRppxo/sddefault.jpg" width="64"/>
<br>Euronews English Live<br>
5avbHxRppxo
</button>
</div>
<div>
<button onclick='playYT("a-M_5rGhPdg");'>
<img src="http://i.ytimg.com/vi/a-M_5rGhPdg/sddefault.jpg" width="64"/>
<br>FRANCE 24 en Direct<br>
a-M_5rGhPdg
</button>
</div>
<div>
<button onclick='playYT("rWFTvniIDUs");'>
<img src="http://i.ytimg.com/vi/rWFTvniIDUs/sddefault.jpg" width="64"/>
<br>Africa24 Live<br>
rWFTvniIDUs
</button>
</div>
</div>
</div>
<h1 id="clock"></h1>
<script>
// 2. This code loads the IFrame Player API code asynchronously.
var tag = document.createElement('script');
tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
// 3. This function creates an <iframe> (and YouTube player)
// after the API code downloads.
var player;
function onYouTubeIframeAPIReady() {
let height = window.innerHeight - 100;
let width = height * 16 / 9;
player = new YT.Player('player', {
height: height,
width: width,
videoId: 'lrX6ktLg8WQ',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
event.target.setVolume(100);
event.target.playVideo();
}
// 5. The API calls this function when the player's state changes.
// The function indicates that when playing a video (state=1),
// the player should play for six seconds and then stop.
var done = false;
function onPlayerStateChange(event) {
// if (event.data == YT.PlayerState.PLAYING && !done) {
// setTimeout(stopVideo, 6000);
// done = true;
// }
}
/*
function stopVideo() {
player.stopVideo();
}
*/
function playYT(v_id) {
// https://stackoverflow.com/questions/13180540/how-to-dynamically-change-youtube-player-videoid
player.loadVideoById(v_id);
}
</script>
<script>
var clock = document.getElementById("clock");
function clockwork() {
time = new Date();
clock.innerHTML = time.getFullYear()+"/"
+(time.getMonth()+1)+"/"
+time.getDate()+" "
+("0" + time.getHours()).slice(-2)+":"
+("0" + time.getMinutes()).slice(-2)+":"
+("0" + time.getSeconds()).slice(-2);
setTimeout(clockwork, 100);
}
clockwork();
</script>
</body>
</html>