HTML & CSS Snipits

Best viewed on regular computer screen
(i.e. not so good on smartphones)



I have collected a varied set of HTML and CSS snipits to do things so I am sharing them here. Currently they are in no particular order.

Most if not all of these batch files will work with current versions of Windows.

Use at your own risk.


Responsive Video

<style>
  .video-outer-container {
    display: grid;
    align-items: center;
    justify-content: center;
    grid-template-columns: 1fr;
    max-width: 900px;
    margin: auto;
  }

  .video-container {
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
  }

  .video-container iframe,
  .video-container object,
  .video-container embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
</style>

<body>
  <div class="video-outer-container">
    <div class="video-container">
      [Place video or iframe here with out brackets]
    </div>
  </div>
</body>

I will add more in the future...