Компоненты Встраивание медиафайлов Компонент Media Embed

Компонент Media Embed

Минималистичный и плоский дизайн встраиваемого компонента медиа с цветовой гаммой земляных тонов, подходящий для деловых/корпоративных сайтов. Это компонент средней сложности с адаптивным дизайном и поддержкой темной темы с использованием Tailwind CSS. JavaScript не включен.

Предварительный просмотр

HTML-код



<div class="container mx-auto p-4 bg-gray-100 dark:bg-gray-800 rounded-lg shadow-md">

  <div class="flex flex-col md:flex-row">

    <!-- Media Embed Placeholder -->

    <div class="md:w-2/3 w-full">

      <div class="aspect-w-16 aspect-h-9 bg-gray-300 dark:bg-gray-700 rounded-md overflow-hidden">

        <!-- Placeholder for embedded media (e.g., iframe for YouTube, Vimeo, etc.) -->

        <!-- Replace with your actual embed code -->

        <iframe src="https://www.youtube.com/embed/your-video-id" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen class="w-full h-full"></iframe>

      </div>

    </div>



    <!-- Content Area -->

    <div class="md:w-1/3 w-full md:ml-4 mt-4 md:mt-0">

      <h3 class="text-xl font-semibold text-gray-800 dark:text-white mb-2">Media Title</h3>

      <p class="text-gray-600 dark:text-gray-300 text-sm mb-4">

        A brief description of the embedded media goes here. Provide context or a summary.

      </p>

      <div class="flex items-center text-gray-500 dark:text-gray-400 text-xs">

        <svg xmlns="http://www.w3.org/2000/svg" class="h-4 w-4 mr-1" fill="none" viewBox="0 0 24 24" stroke="currentColor">

          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 8v4l3 3m6-3a9 9 0 11-18 0 9 9 0 0118 0z" />

        </svg>

        <span>Published on: October 26, 2023</span>

      </div>

    </div>



  </div>

</div>

Связанные компоненты

Компонент встраивания мультимедиа в стиле ретро

Отзывчивый компонент встраивания мультимедиа с дизайном в стиле «ретро/винтаж», вдохновленный эстетикой 80-х/90-х годов, такой как старые ЭЛТ-мониторы и видеомагнитофоны. Он использует дополнительную цветовую гамму бирюзового и оранжевого на грифельно-серой основе, подходящую для веб-сайтов «Бизнес/Корпоративный». Компонент отличается умеренной сложностью с эффектами наведения на кнопку воспроизведения и миниатюру мультимедиа, искусственную световую анимацию REC и декоративные нефункциональные элементы управления. Он включает в себя поддержку темной темы с использованием префикса Tailwind 'dark:'. Медиа-область рассчитана на соотношение сторон 16:9 (требуется плагин Tailwind aspect-ratio или резервный CSS-вариант, такой как трюк с отступом внизу). Используется изображение-заполнитель из picsum.photos.

Открытый