gpt4 book ai didi

javascript - 改变嵌入式 Youtube 视频的纵横比

转载 作者:太空宇宙 更新时间:2023-11-04 10:23:52 25 4
gpt4 key购买 nike

<!DOCTYPE HTML>
<head>
<style>

body {
overflow: hidden;
margin:0;
}
</style>

</head>
<body>


<iframe id="video" src="https://www.youtube.com/embed/U4c9bBeUe4M?modestbranding=1&showinfo=0" frameborder="0" allowfullscreen></iframe>


<script src="https://code.jquery.com/jquery-1.12.3.min.js" integrity="sha256-aaODHAgvwQW1bFOGXMeX+pC4PZIPsvn2h1sArYOhgXQ=" crossorigin="anonymous"></script>

<script>

$(function(){
$('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });

$(window).resize(function(){
$('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
});
});

</script>
</body>

当我调整大小时,有没有办法让 iframe 随视频一起缩小?目前,当它调整大小时,有一个巨大的黑色间隙,视频位于中间。

最佳答案

请查看以下网站。我认为它可以满足您对响应式嵌入式视频的需求。

https://css-tricks.com/NetMag/FluidWidthVideo/Article-FluidWidthVideo.php

https://coolestguidesontheplanet.com/videodrome/youtube/

希望对您有所帮助。

用 CSS 方式而不是使用 javascript 可能更容易。

关于javascript - 改变嵌入式 Youtube 视频的纵横比,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36880575/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com