我对youtube视频的媒体查询无法正常工作

Question

我的响应式设计有问题。在PC屏幕上，我的投资组合是完美的，但是当我在智能手机中打开它时，它的安装不合适。我认为问题在于嵌入的视频。这是代码：

@media screen and (max-width: 600px) {

  .video-item-in{
        overflow: hidden;
        padding-bottom: 56.25%;
        position: relative;
        height: 0;
    }
    
    .video-item-in iframe{
        left: 0;
        top: 0;
        height: 100%;
        width: 100%;
        position: absolute;
    }
}

<div class="portfolio-item">
                <div class="portfolio-description has-margin-right" data-aos="fade-right" data-aos-delay="100">
                    <h6>Video Edition</h6>
                    <h1>Shortfilm Opening</h1>
                    <p>Here is an opening created by a mini-show developed by Fine Arts Faculty of UCLM (Spain). It's made from After Effects and Premiere.
                    </p>
                </div>
                <div class="video-item-in" data-aos="fade-left" data-aos-delay="200">
                     <iframe width="560" height="315" src="https://www.youtube.com/embed/qgv1iV9nvQg" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen>
                    </iframe>
                </div>
            </div>

您能帮我吗？谢谢！

Answer 1

[您拥有带w和h的iframe标记，并且正在css代码中传递另一个！您想要哪一个？