3

I want to display the youtube video in card image with no black bars on top and bottom of it. Here is the code that I have for full card:

enter image description here

.media-video-container {
  position: relative;
  overflow: hidden;
}
.media-video-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
<div class="list p-y">
  <div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 video" *ngFor="let item of media">
    <a class="block box card-item b-a media-item text-left" target="blank" href="{{item?.url}}" title="{{item?.name}}">
      <span class="block clear img-card b-b b-light text-center media-video-container ">
        <img class="h-auto h-full w-full" src="{{getMediaImageUrl(item)}}" alt="{{item?.name}}"/>
      </span>
      <div class="box-body p-y-sm">
        <div class="block clear text-sm">
          {{item?.name}}
        </div>
      </div>
      <button *ngIf="item.type == 'video'" class="ytp-button ytp-large-play-button" aria-label="Play">
        <svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%">
          <path class="ytp-large-play-button-bg" d="..."
            fill="#212121" fill-opacity="0.8"></path>
          <path d="M 45,24 27,14 27,34" fill="#fff"></path>
        </svg>
      </button>
    </a>
  </div>
</div>

I would really appreciate any help :)

NOTE: I have already tried:

Responsive fullscreen youtube video with no black bars?

Responsive video iframes (keeping aspect ratio), with only css?

Dharmesh Vekariya
  • 1,138
  • 2
  • 13
  • 31
Nodira
  • 656
  • 1
  • 9
  • 23
  • Possible duplicate of [Responsive video iframes (keeping aspect ratio), with only css?](https://stackoverflow.com/questions/25302836/responsive-video-iframes-keeping-aspect-ratio-with-only-css) – Itay Gal Aug 16 '18 at 05:43
  • @ItayGal as I mentioned, I have already tried the question with link below my question and the one you linked. It didn't help so I am asking for suggestions – Nodira Aug 16 '18 at 05:45
  • pretty sure I linked a different question... check it – Itay Gal Aug 16 '18 at 05:47
  • @ItayGal I see. Thank you for your comment, I have already checked this too. It is with iframe. Anyway, I tried the solution they gave, didn't work out. – Nodira Aug 16 '18 at 05:52

1 Answers1

1

Try this, Thil will work, adjust the scale value as you wanted.

You can learn more about youtube image thumbnails here

.media-video-container {
  position: relative;
  overflow: hidden;
}

.media-video-container img {
  /*position: absolute;
  top: 0;
  left: 0;*/
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  -webkit-transform: scaleY(1.2);
  -moz-transform: scaleY(1.2);
  -ms-transform: scaleY(1.2);
  transform: scaleY(1.2);
}
<div class="list p-y">
  <div class="item col-xs-12 col-sm-6 col-md-4 col-lg-3 video" *ngFor="let item of media">
    <a class="block box card-item b-a media-item text-left" target="blank" href="{{item?.url}}" title="{{item?.name}}">
      <span class="block clear img-card b-b b-light text-center media-video-container ">
        <img class="h-auto h-full w-full" src="{{getMediaImageUrl(item)}}" alt="{{item?.name}}"/>
      </span>
      <div class="box-body p-y-sm">
        <div class="block clear text-sm">
          {{item?.name}}
        </div>
      </div>
      <button *ngIf="item.type == 'video'" class="ytp-button ytp-large-play-button" aria-label="Play">
        <svg height="100%" version="1.1" viewBox="0 0 68 48" width="100%">
          <path class="ytp-large-play-button-bg" d="..."
            fill="#212121" fill-opacity="0.8"></path>
          <path d="M 45,24 27,14 27,34" fill="#fff"></path>
        </svg>
      </button>
    </a>
  </div>
</div>
Ramesh
  • 2,297
  • 2
  • 20
  • 42
  • thank you so much for taking your time and giving a solution. Unfortunately it didn't work. (I can't post a screenshot after your solution in comment) – Nodira Aug 16 '18 at 06:09
  • Also the max width you give for ytImgContainer seems to be big. I have a card of 292.5x266 – Nodira Aug 16 '18 at 06:12
  • I had the same problem once. During that time I set `overflow:hidden` to the wrapper and scaled the thumbnail their I achieved the solution. Then after only I have learnt about the code that I have answered. If it didn't work, try to scale the thumbnail image – Ramesh Aug 16 '18 at 06:14
  • @Nodirabegimxonoyim I edited the answer in the manner that I mentioned. Please check it out – Ramesh Aug 16 '18 at 06:23
  • thank you so much. I have tried many options those unfortunately, didn't work. This solved the problem. Good luck! – Nodira Aug 16 '18 at 06:32
  • Happy to help. Have a great journey in the field – Ramesh Aug 16 '18 at 06:33