0
iFrameを使用してYouTube動画を読み込んでいます。現在のコードでは、ビデオの余白がわずかに切り取られます（サムネイル画像が含まれます）。下に黒い背景の画面に合わせるためには、何を変更する必要がありますか？テストするには、このコードをhtmlファイルに貼り付け、ブラウザで実行します。ウィンドウのサイズ変更によって問題が示されます。YouTube動画を画面に合わせるにはどうしたらいいですか？
<html>
<head>
<title>Youtube Video</title>
<meta name='viewport' content='width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no'/>
</head>
<body bgcolor='white' marginwidth='0' marginheight='0'>
<!-- The <iframe> (and video player) will replace this <div> tag. -->
<div id='player'></div>
<script>
var tag = document.createElement('script');
tag.src = 'https://www.youtube.com/iframe_api';
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
var player;
function onYouTubeIframeAPIReady() {
player = new YT.Player('player', {
playerVars: { 'iv_load_policy': 3, 'controls': 1, 'rel': 0, 'showinfo': 0, 'fs': 0 },
frameborder: '0',
height: '100%',
width: '100%',
videoId: 'axZ1e0_2ysc',
events: {
'onReady': onPlayerReady,
'onStateChange': onPlayerStateChange
}
});
}
function onPlayerReady(event) {
document.title = '0';
}
function onPlayerStateChange(event) {
if (event.data == YT.PlayerState.PLAYING) {
document.title = '1';
} else if (event.data == YT.PlayerState.ENDED || event.data == YT.PlayerState.PAUSED) {
document.title = '2';
}
}
</script>
</body>
</html>