Rendre responsive vidéo youtube

Bonjour à tous.

Bon, ce n'est pas du php mais plutôt du html / css, mais je ne savais pas où poster ce message.

<Je débute dans le développement que j'apprends pour le plaisir. Je fais un site pour un ami. Je dois mettre une vidéo dans une page, qui est intégré dans une flexbox. Et, je n'arrive pas à la rendre responsive. C'est dimension réelles sont 560 / 315. Là, je les ai réduites pour que la vidéo tienne dans sans boîte. Mais en mode responsive sur une tablette, j'aimerais l'avoir plus grande, qu'elle s'adapte à la largeur de l'écran.

Mais, je bloque, même en suivant les explication que je trouve, en particulier sur ce forum.

<div id="about_ligne">
    <div id="about_menu">
        <div id="about_menu_1">
            <p class="texte_about_menu bordure_boutons_about_1">Biography & Testimonials</p>
            <p class="texte_about_menu bordure_boutons_about_2">The Author</p>
        </div>
        <div id="about_1" class="bordure_2">
            <div id="plume_about">
                <img src="<?= \utils\Path::images ("about_jp/about_jp_plume.png") ?>" height="150px" alt="Plume">
            </div>
            <div id="about_2">
                <div>
                    My eyes were opened... Horses were not just to be used also to be communed with in an endless search for unity and communication.
                </div>
                <div id="signature_about" class="center">
                    <img src="<?= \utils\Path::images ("about_jp/about_jp_signature.png") ?>" alt="Signature JPG">
                </div>
            </div>
        </div>
    </div>
    <div id="about_video">
        <div class="about_video"><iframe width="350" height="197" src="https://www.youtube.com/embed/6-TRYwTNHv0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
        <div id="video_2">A short film of JP enjoying his personal horse Orion (age 6). On this particular day Orion is learning piaffe, passage and pirouettes. Relaxation and obedience are top priority to JP as he teaches his young horses new movements.</div>
    </div>
</div>

Comme vous le voyez, j'ai fait des imbrication de flexboxs... Y'a peut-être moyen de faire mieux, mais pour le moment, je découvre tout cela ! Flexbox, il y a peu, je ne connaissais pas !

Quand je mets le code suivant que j'ai trouvé sur ce forum, entre autre, la vidéo disparaît.

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

Je rajoute le css complémentaire :

#about_ligne {
    display: flex;
    max-width: 950px;
    justify-content: space-around;
    padding-top: 25px;
    align-items: flex-start;
    margin: 0 auto;
}

#about_video{
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-top: 30px;
    max-width: 400px;
}

#video_2{
    font-family: 'Droid Serif', serif;
    text-align: justify;
    font-size: 1.2em;
    color: #000000;
    padding: 15px 5% 0 5%;
}

Voilà ce que je voudrais que cela donne en mode écran PC



et en mode tablette



Merci pour votre aide ; bien cordialement ; JP