Question

我需要制作一个youtube视频作为特定部分而不是整个页面的背景。因此，我需要将部分设置为390px高和100％宽度。

现在我正在使用此代码，但问题是youtube iframe的全宽为100％，但是视频本身很小，带有黑色的侧边栏。这是代码：


<div class="video-wrapper">
   <div id="player"></div>
</div>

<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() {
            player = new YT.Player('player', {
                height: '390',
                width: '100%',
                videoId: 'EhArkyWXpO0',
                events: {
                    'onReady': onPlayerReady,
                    'onStateChange': onPlayerStateChange
                }
            });

        }


        // 4. The API will call this function when the video player is ready.
        function onPlayerReady(event) {
            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();
        }

</script>

我正在使用youtube API，并且我在javascript中将宽度设置为100％。我很确定我必须使用CSS来实现这一目标，但到目前为止还没有成功...

这是当前输出

我想要的输出将是没有黑色侧边栏的宽纸

谢谢！

Answer 1

您需要通过将width设置为窗口或父节点的宽度来使用javascript来调整宽度。

将父节点的大小设置为100％，然后尝试执行以下操作：

node = document.getElementById("player");
player = new YT.Player('player', {
    height: node.parentNode.offsetWidth * 9 / 16,
    width: node.parentNode.offsetWidth,
    videoId: 'EhArkyWXpO0',
    events: {
        'onReady': onPlayerReady,
        'onStateChange': onPlayerStateChange
    }
)

如果要在调整窗口大小时调整大小，则必须向window.onresize添加一个功能：

window.onresize = function() {
    var node = document.getElementById('player');
    // fetch player; may a childnode of node[id="player"]
    player.setAttribute("width", node.parentNode.offsetWidth);
};

YouTube视频作为特定部分的背景

1 个答案: