0

I have a link which links to an audio file hosted on Soundcloud. Clicking the link opens up a new webpage. Is it possible to have an audio player/youtube video (i could easily transfer from soundcloud to Youtube if necessary) and have the player open up within the page - something like a light box effect?

HTML is:

<div class="audiodemo">
<div class="audiodemoheader"> “Welcome to the Recovery Show, who's on board?”        </div>
<div class="audiodemolink"><a href="https://soundcloud.com/iamdanmorris/dan- morris-radio-demo" class="demolink">Listen</a></div>
</div>

CSS is:

.audiodemo {
width: 100%;
height: 300px;
float: left;
background-image:url(images/audio_demo_background.jpg);
}

.audiodemoheader {
width:100%;
height:auto;
text-align:center;
float:left;
margin-top:94.5px;
font: 200 18px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
font-size: 30px;
font-weight: 200;
color: #FFF;
}

.audiodemolink {
width:100%;
height:auto;
text-align:center;
float:left;
margin-top:40px;

}


.audiodemolink .demolink {
display: inline-block;
font-weight: 700;
text-transform: uppercase;
padding: 11px 51px;
border: 3px solid #fff;
-webkit-transition: .2s;
transition: .2s;
color:#FFF;
text-decoration:none;
margin-left:auto;
margin-right:auto;
}

.audiodemolink .demolink:hover {
opacity: 0.7;
}

Thanks in advance.

iamdanmorris
  • 307
  • 2
  • 6
  • 13

2 Answers2

0

There are many ways to implement that. An easy way to make the page loading inside yours could be using JQuery UI's Dialog.

http://jqueryui.com/dialog/

You could listen to the click event on your "Listen" link to open up a dialog and load the foreign page into your dialog using an iframe.

How to display an IFRAME inside a jQuery UI dialog

Community
  • 1
  • 1
ibo_s
  • 425
  • 4
  • 13
0

If you don't like to use iframes, you could also go the youtube way. The html5 and flash player embed codes from youtube work out of the box. Listen to the click event on your link (I suggest JQuery for this, because it's easy to use also for beginners), put the embed code inside your dialog and open it up. To stop the player on close, you can listen to a close button inside the dialog and just empty the dialog. This should stop the embeded player.

ibo_s
  • 425
  • 4
  • 13
  • i really wouldnt even know where to begin coding this. Would you help? – iamdanmorris Feb 05 '15 at 02:08
  • You're being to general as I could help you with your concrete coding. Break your problems in smaller peaces and start to implement them. If you stuck, ask a specific question. If you want to take my first approach, start with these steps: 1. Look up how to get JQuery working on your page (if needed, use google for this, there are a lot of descriptions). 2. Look up how to get JQuery UI to work, this is an additional plugin for JQuery 3. Put an div element with "hello world" in it on your page and try to open it up inside a dialog. If this all works it's just a little step from here to target. – ibo_s Feb 05 '15 at 23:42
  • On my first JQuery link there's also sample code, how to display a div inside a dialog. Instead of executing that code on document load, you want to execute it "onclick". This can be done by jquery click event. Add this event to your link and execute the dialog code inside that event function. http://api.jquery.com/click/ – ibo_s Feb 05 '15 at 23:51