# \[Express\] embedding HTML5 audio player

**URL:** <https://discourse.softpress.com/t/express-embedding-html5-audio-player/16800>\
**Category:** Tutorials\
**Created:** [March 7, 2013, 5:35am UTC](https://discourse.softpress.com/t/express-embedding-html5-audio-player/16800 "2013-03-07T05:35:31Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![Matt7](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/m/9fc29f/32.png) [@Matt7](https://discourse.softpress.com/u/Matt7)\
**Post date:** [March 7, 2013, 5:35am UTC](https://discourse.softpress.com/t/express-embedding-html5-audio-player/16800/1 "2013-03-07T05:35:31Z")

</div>

Hello out there,

Am hoping someone out there could help with this … (first off I should say I am a total beginner!)

I am trying to embed the HTML5 audio player widget from Soundcloud in Freeway Express.

I can get it in there no problem, and it works nicely.

The trouble is that it pushes all the content beneath it off the page, and corrupts some text.

For example, at the very bottom of my page I have a Facebook like button, and a little ‘all rights reserved’ notice.

I insert the code for the player using the markup item command, and size it accordingly.

All goes well with the player itself, but my Facebook like button gets pushed way, way (vertically) down beyond the set dimensions of the page and my ‘all rights reserved’ text becomes jumbled and illegible.

Am I doing things the wrong way here? (I guess so!)

Here is the Soundcloud code:

Could any knowledgable people out there offer any advice?

Thank you kindly in advance!

* * *

tutorials mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Matt7](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/m/9fc29f/32.png) [@Matt7](https://discourse.softpress.com/u/Matt7)\
**Post date:** [March 7, 2013, 7:40am UTC](https://discourse.softpress.com/t/express-embedding-html5-audio-player/16800/2 "2013-03-07T07:40:55Z")

</div>

PS - I did forget to mention that the problem occurs when in preview mode, or when viewing in the browser (Safari). In page mode everything is okay.

* * *

tutorials mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![David\_McCallum](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/d/ec9cab/32.png) [@David\_McCallum](https://discourse.softpress.com/u/David_McCallum)\
**Post date:** [March 7, 2013, 5:51pm UTC](https://discourse.softpress.com/t/express-embedding-html5-audio-player/16800/3 "2013-03-07T17:51:57Z")

</div>

Can you post a link to your example online somewhere?

And are you allowing for the 450px height of the iFrame in your layout.

David

* * *

tutorials mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)

---

<div class="post-metadata">

**Author:** ![Matt7](https://discourse.softpress.com/letter_avatar_proxy/v4/letter/m/9fc29f/32.png) [@Matt7](https://discourse.softpress.com/u/Matt7)\
**Post date:** [March 7, 2013, 11:13pm UTC](https://discourse.softpress.com/t/express-embedding-html5-audio-player/16800/4 "2013-03-07T23:13:22Z")

</div>

Hi David,

Thank you so much for your reply … you sir, have solved my problem!

I had not been vertically sizing the iframe to the 450px because when previewing, the audio player would come out the right size anyway, just by itself.

But actually sizing it to be the 450px in the inspector did something magic to the code and now the Facebook like button and ‘rights reserved’ notice stay put.

Thank you very much again!

Matt

* * *

tutorials mailing list  
email@hidden  
Update your subscriptions at:  
[http://freewaytalk.net/person/options](http://freewaytalk.net/person/options)
