🔰 Some useful CSS shortcuts



💎 @Htmlcss_channels | #css #JavaScript

💻 Responsive HTML Video با Orientation Media Query

💻 کد CSS:

* حالت عمودی (موبایل) *

@media screen and (orientation: portrait) {
  video {
    width: 100%;
    height: auto;
  }
}

* حالت افقی (دسکتاپ) *

@media screen and (orientation: landscape) {
  video {
    width: auto;
    height: 100vh;
    max-width: 100%;
  }
}

⚡ بهینه‌سازی بیشتر:
* فقط موبایل *

@media screen and (max-width: 768px) and (orientation: portrait) {
  video {
    object-fit: cover;
    aspect-ratio: 9/16;
  }
}

* فقط دسکتاپ *

@media screen and (min-width: 769px) and (orientation: landscape) {
  video {
    object-fit: contain;
    aspect-ratio: 16/9;
  }
}

🎬 مثال عملی:

<video controls poster="poster.jpg">
  <source src="video-mobile.mp4" media="(orientation: portrait)">
  <source src="video-desktop.mp4" media="(orientation: landscape)">
  Your browser does not support the video tag.
</video>

💎 @Htmlcss_channels | #HTML #css #JavaScript