블로그를 만들면서 자세한 설명 글을 위해 codepen을 삽입을 해보았다.

삽입 방법

블로그에 적용 중인 코드

iframe의 소스코드를 가져와 주소를 동적으로 받아오고 있다.

<iframe
   height="350"
   className="w-full"
   title="videoTag"
   src={`${codepenUrl}/${codepenMyId}/embed/${codepenId}?default-tab=html%2Cresult`}
   loading="lazy"
>
   <span>See the Pen</span>
   <Link href={`${codepenUrl}/${codepenMyId}/pen/${codepenId}`}>
       videoTag
   </Link>
   <span>by pminsun</span> (<Link href={`${codepenUrl}/${codepenMyId}`}>@pminsun</Link>)
   <span>on</span>
   <Link href={codepenUrl}>CodePen</Link>.
</iframe>