MusicBox

Description

page 구성 요소로 Youtube Iframe을 추가할 수 있음.
단순히 Iframe을 추가함.
(추후에 custom해서 원하는 영상을 간단하게 변경할 수 있도록 할 예정)

Required

none.

Source

View

path: quartz/components/custom/MusicBox.tsx

MusicBox.tsx

import { QuartzComponent, QuartzComponentConstructor } from "../types"  
import style from "../styles/custom/musicBox.scss"  
  
const MusicBox: QuartzComponent = () => {  
  return (  
    <div className="music-box">  
    <h3 className="music-box-title">Music</h3>  
    <div className="iframe-container">  
      <iframe  
        src="https://www.youtube.com/embed/tI-5uv4wryI?si=kLiQKCxDLzhLqSuC&autoplay=1&mute=1&controls=0&loop=1&playlist=tI-5uv4wryI"  
        title="YouTube video player"  
        frameBorder="0"  
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"  
        referrerPolicy="strict-origin-when-cross-origin"  
        allowFullScreen  
      ></iframe>  
    </div>  
    </div>  
  )}  
  
MusicBox.css = style  
  
export default (() => MusicBox) satisfies QuartzComponentConstructor

CSS

path:quartz/components/styles/musicBox.scss

musicBox.scss

.music-box-title {  
  margin: 0;  
  color: var(--textHighlight);  
}  
.iframe-container {  
  border-radius: 5px;  
  overflow: hidden;  
  display: inline-block;  
  margin: .5em 0;  
}  
  
iframe {  
  border: none;  
  width: 100%;  
  height: 100%;  
  display: block;  
}