I am currently creating a custom media player for a customer with HTML and javascript. The customer only needs to add an empty element containing necessary data-attributes (such as preview-image, srcset, URL) to the site for the script to create a player unit.
The image and the media are siblings within the wrapping parent.
A click on the play button basically just hides the image and displays the media.
Player unit markup:
<div class="wrapper">
<img class="preview-img" src="...">
<button class="play-button">Play</button>
<iframe class="embedded-media hidden">...</iframe>
</div>
The website owner now wants the size of the player to be dependent on the size of the preview image or srcset.
I tried to use the image as wrapper, but it's not a container element.
Is there any way to size the parent depending on the images size?
