HTML виджет трека на тильде

Question

HTML виджет трека на тильде

Адам Тлехугов Мастер (2249), на голосовании 1 день назад

уже все перепробовал, никак не могу нормально растянуть виджет по серому фону справа

 <div class="music-widget"> 
    <iframe allowfullscreen="true"  
        src="https://band.link/hotwheeels/iframe?youtube_enabled=1&header=1&title=1&theme=dark&player_enabled=1&picture=1&footer=1"> 
    </iframe> 
</div> 
 
<style> 
.music-widget { 
    display: flex; 
    justify-content: center; 
    align-items: center; 
    width: 420px; /* Чуть больше, чтобы iframe заполнил */ 
    height: 650px; 
    margin: 0 auto; 
    background: rgba(20, 20, 20, 0.9); 
    border-radius: 40px; 
    padding: 0; 
    overflow: hidden; 
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); 
} 
 
.music-widget iframe { 
    border-radius: 40px; 
    width: 100%; /* Растягиваем на всю ширину */ 
    height: 100%; 
    border: none; 
} 
</style>

помогите пожалуйста)

Answer 1

Ширину вместо 420 пикселей поставь 0 или убери чтобы проверить

Answer 2

.music-widget iframe {

transform: scale(1.2);
transform-origin: top left;

border-radius: 40px;
width: 100%;
height: 100%;
border: none;
} scale подстрой под себя он масштабирует iframe

Answer 3

 <div class="music-widget">  
    <iframe allowfullscreen="true"   
        src="https://band.link/hotwheeels/iframe?youtube_enabled=1&header=1&title=1&theme=dark&player_enabled=1&picture=1&footer=1">  
    </iframe>  
</div>  
 
<style>  
.music-widget {  
    display: flex;  
    justify-content: center;  
    align-items: center;  
    width: 100%; /* Растягиваем на всю ширину контейнера */ 
    height: 650px;  
    margin: 0;  
    background: rgba(20, 20, 20, 0.9);  
    border-radius: 40px;  
    padding: 0;  
    overflow: hidden;  
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); 
    max-width: 100%; /* Ограничиваем максимальную ширину */ 
}  
 
.music-widget iframe {  
    border-radius: 40px;  
    width: 100%;  
    height: 100%;  
    border: none;  
}  
 
/* Если виджет находится внутри другого контейнера, добавьте это: */ 
.your-container-class { 
    display: flex; 
    justify-content: flex-end; /* Выравнивание справа */ 
} 
</style>