Teachnique
      CourseRoadmaps
      Login

      IntroductionSyntaxSelectorsInclusionMeasurement UnitsColorsBackgroundsFontsTextImagesLinksTablesBordersBorder BlockBorder InlineMarginsListsPaddingCursorOutlinesDimensionScrollbarsInline BlockDropdownsVisibilityOverflowClearfixFloatArrowsResizeQuotesOrderPositionHyphensHoverDisplayFocusZoomTranslateHeightHyphenate CharacterWidthOpacityZ-IndexBottomNavbarOverlayFormsAlignIconsImage GalleryCommentsLoadersAttr SelectorsCombinatorsRootBox ModelCountersClipWriting ModeUnicode-bidimin-contentAllInsetIsolationOverscrollJustify ItemsJustify SelfTab SizePointer EventsPlace ContentPlace ItemsPlace SelfMax Block SizeMin Block SizeMix Blend ModeMax Inline SizeMin Inline SizeOffsetAccent ColorUser Select

      GridGrid LayoutFlexboxVisibilityPositioningLayersPseudo ClassesPseudo Elements@ RulesText EffectsPaged MediaPrintingLayoutsValidationsImage SpritesImportantData Types

      TutorialRounded CornerBorder ImagesMulti BackgroundColorGradientsBox ShadowBox Decoration BreakCaret ColorText ShadowText2d transform3d transformTransitionAnimationMulti columnsBox SizingTooltipsButtonsPaginationVariablesMedia QueriesFunctionsMath FunctionsMaskingShapesStyle ImagesSpecificityCustom Properties

      IntroductionViewportGrid ViewMedia QueriesImagesVideosFrameworks

      Questions and AnswersQuick GuideReferencesColor ReferencesWeb browser ReferencesWeb safe fontsUnitsAnimation

      PX to EM converterColor Chooser & Animation

      Useful ResourcesDiscussion

      Feedback

      Submit request if you have any questions.

      Course
      Videos

      CSS Tutorial

      This CSS tutorial is designed for beginners to navigate through the essentials and intricate aspects of CSS styling. Upon finishing this tutorial, participants will possess a comprehensive understanding of CSS, setting a solid foundation for further exploration and mastery. This guide aims to equip you with the skills necessary to transform your visions into visually appealing web designs, laying the groundwork for your journey towards becoming an accomplished web designer.

      RWD Videos

      
      Alike images, videos can be made responsive too, such that the video should expand to fill the entire content area, while maintaining its original aspect ratio.
      When a fixed width or height of a video is specified, it may cause layout issue, such as breaking page layouts, distorting the image, or displaying black bars around the video. The black bars around the video are called letterboxing (on top and bottom of the video), pillarboxing (on left and right of the video), and windowboxing (on all sides of the video).

      CSS RWD Videos - width Property

      To make a video responsive and fluid, the width property of the video is set to a percentage value, along with height property set to auto.
      <html>
      <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
         video {
            width: 100%;
            height: auto;
         }
      </style>
      </head>
      <body>
         <p>Resize the browser window to see how the size of the video player will scale.</p>
         <video width="400" controls>
            <source src="foo.mp4" type="video/mp4">
         </video>
      </body>
      </html>

      CSS RWD Videos - max-width Property

      To make a video responsive and fluid, the max-width property of the video is set to a 100%, which will let the video get scaled down to the extent it is set, but will never scale up more than its original size.
      <html>
      <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
         video {
            max-width: 100%;
            height: auto;
         }
      </style>
      </head>
      <body>
         <p>Resize the browser window to see how the size of the video player will scale.</p>
         <video width="400" controls>
            <source src="foo.mp4" type="video/mp4">
         </video>
      </body>
      </html>

      CSS RWD Videos - Within a grid

      The following example demonstrates the use of a responsive video within a grid column. Based on the max-width value of the video, the video gets scaled down as per the screen size.
      <html>
      <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
         * {
            box-sizing: border-box;
         }
      
         .title {
            border: 2px solid black;
            padding: 10px;
            background-color: blanchedalmond;
         }
      
         .grid-one {
            width: 60%;
            float: left;
            padding: 10px;
            border: 2px solid black;
            background-color: darkseagreen;
         }
      
         .grid-two {
            width: 40%;
            float: left;
            padding: 15px;
            border: 2px solid black;
            background-color: lightgreen;
         }
      
         ul {
            list-style-type: none;
         }
      
         li {
            background-color: aqua;
            padding: 5px;
            border: 1px solid black;
            margin: 5px;
         }
      
         video {
            max-width: 100%;
            height: auto;
         }
      </style>
      </head>
      <body>
         <div class="title">
         <h1>Responsive Web Design</h1>
         </div>
      
         <div class="grid-two">
         <ul>
            <li>Viewport</li>
            <li>Grid view</li>
            <li>Media queries</li>
            <li>Images</li>
            <li>Videos</li>
            <li>Frameworks</li>
         </ul>
         </div>
      
         <div class="grid-one">
         <h1>Responsive Videos</h1>
         <p>Alike images, videos can be made responsive too, such that the video should expand to fill the entire content area, while maintaining its original aspect ratio.</p>
         <video width="400" controls>
            <source src="foo.mp4" type="video/mp4">
         </video>
         <p>Resize the browser window to see how the content gets responsive to the resizing.</p>
         </div>
      </body>
      </html>