change the z-index of iframe
// responsivity 
// and modify the z-index of the iframe
<style>
.publicity{
    position: relative;
   overflow: hidden;
    text-align: center;
    margin-top: 20px;
    padding-top: 56.25%;
    z-index:-1;
}
.publicity iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index:auto;
  }
</style>
<body>
<div class="publicity">
        <iframe width="560" height="315"
        src="https://www.youtube.com/embed/zGrYiMaAlJs?loop=1&muted=1" 
        title="YouTube video player" 
        frameborder="0" 
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" 
        allowfullscreen></iframe>
    </div>
</body>
