Dorokhov.codes

06. Tricks

Hide the first hint option from a select

Example 1:

<select>
    <option value="">Choose something</option>
    <option value="1">Yes</option>
    <option value="0">No</option>
</select>

/** CSS: **/
select option[value=""] {
    display: none;
}

Example 2:

<select>
    <option>Choose something</option>
    <option value="1">Yes</option>
    <option value="0">No</option>
</select>

/** CSS: **/
select option:not([value]) {
    display: none;
}

Aspect ratio for videos

How TO - Aspect Ratio.

My solution:

<div class="youtube-video">
    <iframe src="..."></iframe>
</div>

.youtube-video {
  position: relative;
  padding-top: 56.25%;
  width: 100%;
  margin-bottom: 20px;

  iframe {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 100%;
  }
}