Jak dopasować ramkę do długości i szerokości przykładowego pudelka div (czy filmu yt) ?

Question

 

Witam. Jak manipulować skalą tej ramki w css ? Chciałbym dopasować do szerokości i długości filmu z yt. Ramka na zewnątrz jak i wewnątrz jest pusta. Obraz w formacie .png. Żadne bordery with, slice itp... nie pomagają, obraz stoi w miejscu jak potłuczony :)  Czego nie wiem ? :)

 

Answer 1

A może coś takiego: https://codepen.io/accolade/pen/bYKaGX - tutaj zamiast png jest ustawiony border w elemencie, w którym zawiera się video.

Answer 2

Witam. Może po prostu dać border dla iframe.

<div class="container">
 <iframe class="iframe-border" width="100%" height="300" src="https://www.youtube.com/embed/XGSy3_Czz8k">
</iframe> 
</div>

body{
  background-color: grey;
}
.container{
  position: absolute;
  width: 300px;
  top: 50%;
  left: 50%;
  margin-right: 50%;
  transform: translate(-50%, -50%);
}
.iframe-border{
border:20px solid black;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
}

 

Comments

Dziękuję Ci bardzo. Jakoś się uparło mi, że iframe to nie div i nie wziąłem pod możliwość, że wszystko można ostylowac. :)  Ale się uczepilem tego border- source i tak dalej. Jeszcze raz dzięki ! Społeczność na forum jest niesamowita !  :)