Embedding H5P Content

I want to add an h5p accordion to a page (in a Moodle label), but not as a link, just as below. All is good. I cannot, however, change the width of the embedded accordion. I'd like to change it to 100% so that it is responsive to the device it is being viewed on. I have tried quite a few things, most notably this below, where I set the width to 100%, also to no avail. Any help would be appreciated.

<h2>R&amp;W Assignment Descriptions</h2>
<div style="width: 100%;"><iframe src="https://learning.wintec.ac.nz/mod/hvp/embed.php?id=1866659" width="100%" height="252" frameborder="0" allowfullscreen="allowfullscreen"></iframe>
<script src="https://learning.wintec.ac.nz/mod/hvp/library/js/h5p-resizer.js" type="text/javascript"></script>
</div>