미디어 임베드 컴포넌트
블로그/콘텐츠 사이트에 대한 어두운 테마를 지원하는 반응형 미디어 임베드 구성 요소로, 머티리얼 디자인 원칙, 트라이어딕 색 구성표 및 적당한 복잡성으로 스타일링되었습니다. 포함된 비디오 자리 표시자 및 관련 기사 링크가 포함되어 있습니다.
HTML 코드
<div class="container mx-auto p-4 max-w-3xl">
<div class="bg-white dark:bg-gray-800 rounded-lg shadow-md overflow-hidden">
<div class="relative" style="padding-top: 56.25%;">
<!-- 16:9 Aspect Ratio -->
<iframe class="absolute inset-0 w-full h-full" src="https://www.youtube.com/embed/dQw4w9WgXcQ" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="p-4">
<h2 class="text-xl font-bold text-gray-800 dark:text-white mb-2">Embedded Media Title</h2>
<p class="text-gray-600 dark:text-gray-300 text-sm mb-4">Published on October 27, 2023</p>
<p class="text-gray-700 dark:text-gray-200 mb-4">This is a description of the embedded media content. It provides context and information about the video.</p>
<div class="border-t border-gray-200 dark:border-gray-700 pt-4">
<h3 class="text-lg font-semibold text-gray-800 dark:text-white mb-3">Related Articles</h3>
<ul>
<li class="mb-2">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Related Article Title 1</a>
</li>
<li class="mb-2">
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Related Article Title 2</a>
</li>
<li>
<a href="#" class="text-blue-600 dark:text-blue-400 hover:underline">Related Article Title 3</a>
</li>
</ul>
</div>
</div>
</div>
</div>관련 구성 요소
사이버펑크 스포츠 미디어 임베드
사이버펑크 미학을 가진 스포츠/피트니스 애플리케이션용으로 설계된 복잡하고 반응이 빠른 미디어 임베드 구성 요소입니다. 밝은 네온 액센트가 있는 단색의 어두운 배경, 여러 대화형 요소 및 완전한 다크 모드 지원이 특징입니다.
뉴모픽 미디어 임베드 컴포넌트
CRM/비즈니스 도구용으로 설계된 생생한 색상의 복잡한 뉴모픽 미디어 임베드 구성 요소로, 비디오 플레이어, 관련 콘텐츠 및 완전한 응답성과 다크 모드를 지원하는 대화형 컨트롤을 보여줍니다.