Code blocks distort

I have two questions, but they may be linked. 

First Question: I have a code block for a rotating "let's chat" on the home page. However, the circle distorts depending on the screen size. How do I lock it in a circle?

<a href="/contact"><center><img src="https://static1.squarespace.com/static/62a06f7de4500f5c95bd5f24/t/6434a57aada4621387b238a8/1681171834706/Pocket+Digital_LetsChat.png" class="rotate" width="170" height="170" />
</center></a>
<style>
  .rotate {
  animation: rotation 8s infinite linear;
}

@keyframes rotation {
  from {
    transform: rotate(359deg);
  }
  to {
    transform: rotate(0deg);
  }
}
</style>

Second Question: Also on the home page, I have an ifram that pops out of the frame depending on the screen size (which results in it going over the textblock). How do I lock this down so it scales better?

 <iframe src="https://player.vimeo.com/video/818621743?h=79c21bc738" width="340" height="564" frameborder="0" allow="autoplay; fullscreen" allowfullscreen></iframe>

Can you share link to page where you added Code Block? We can check easier

@tuanphan So sorry, I thought I did, but must have forgot to paste!
Its https://www.pocketdigital.online/

Thanks @tuanphan you solved it!