[Résolu] Mise en forme d'un tableau CSS

Bonjour à tous, je développe mon site web et je rencontre un petit soucis concernant un tableau. Je vous explique, j'ai créé un tableau pour aligner deux vidéos l'une a l'autre

<table  id="table1">
<tr><th>
<h1 id="video_tableau"><center><b>Voila quelques mots du chef de notre association:</b></center></h1>
<div class="video-container">
 <iframe width="560" height="315" src="https://www.youtube.com/embed/jjBZelfTsu8" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</th>
<th>
<h1 id="video_tableau"><center><b>L'appel du 18 décembre 2020</b></center></h1>
<div class="video-container">
<iframe width="560" height="315" src="https://www.youtube.com/embed/H7bXoS2SuyM" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
</th>
</tr>
</table>

Et je souhaiterais que sur smartphone, les deux cellules se mette à la verticale ainsi que la police diminue, voici mon code CSS:

h1{background-color: #333; color: #fff; font-family: 'Zilla Slab', serif; margin:0; margin-bottom:50px}
@media only screen and (max-width: 1080px) {
#video_tableau {font-size: 20%}
#table1, td{"je n'ai aucune idée de quoi mettre ici"}}

La dessus rien ne fonctionne alors que la méthode

@media only screen and (max-width: 1080px) {}

fonctionne pour d'autres endroit ou j'ai pu l'utiliser
Avez vous des solutions?
merci d'avance
Modifié par YanisL (31 Dec 2020 - 16:45)

Merci pour tes conseils, tout fonctionne parfaitement.