?
Solved

vertically center Google Chrome wav player in iframe

Posted on 2013-12-06
16
Medium Priority
?
438 Views
Last Modified: 2013-12-09
I have the following iframe in a html page:
   <iframe name='newframe' frameborder='0' height='120'></iframe>
I then have the following link which plays a wav file and the Chrome player shows up in the iframe:
    <a href='https://api.twilio.com/Recordings/RE...' target='newframe'>
With height='120' as above, the iframe looks like this:
height='120'With height='40', the iframe looks like this:
height='40'
Is there a way to center the Chrome wav player vertically in the iframe?
0
Comment
Question by:thenelson
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 8
  • 6
16 Comments
 
LVL 30

Expert Comment

by:Britt Thompson
ID: 39702211
Did you try setting the href to display:block and configure padding to push it down in the iframe?
0
 
LVL 39

Author Comment

by:thenelson
ID: 39702246
How would I do that?
0
 
LVL 30

Expert Comment

by:Britt Thompson
ID: 39702259
<a href='https://api.twilio.com/Recordings/RE...'  style="display:block; padding:25px" target='newframe'>
0
Certified OpenStack Administrator Course

We just refreshed our COA course based on the Newton exam.  With 14 labs, this course goes over the different OpenStack services that are part of the certification: Dashboard, Identity Service, Image Service, Networking, Compute, Object Storage, Block Storage, and Orchestration.

 
LVL 39

Author Comment

by:thenelson
ID: 39702306
That change added padding above the link instead of in the iframe.
0
 
LVL 30

Expert Comment

by:Britt Thompson
ID: 39702337
Try this instead - style="position:relative; top:20px; display:block;"

You may need to apply height and width to the href as well.
0
 
LVL 39

Author Comment

by:thenelson
ID: 39702417
That moved the link down. I am thinking any style applied to the link will affect the link not the interior of the iframe.
0
 
LVL 30

Expert Comment

by:Britt Thompson
ID: 39702424
Can you take a screen shot of where the "link is moved down?"
0
 
LVL 39

Author Comment

by:thenelson
ID: 39702436
I didn't included all the code (like the table and other links). The link in question is the "Play" link:
Link moved down
0
 
LVL 30

Expert Comment

by:Britt Thompson
ID: 39702443
I think you're going to have to post your code something is missing on the backend that I'd have to see.
0
 
LVL 39

Author Comment

by:thenelson
ID: 39702509
it is a php script with a lot of code that has nothing to do with this problem.  Here is the relevant code:
<html>
<body>
<table><tr><td colspan='7'  align='center'>
</td></tr>
<tr><td>DATE</td>
<td> </td>
<td>PHONE NO&emsp;</td>
<td>NAME</td>
<td>&emsp;LEN</td>
<td>&emsp;PLAY&emsp;</td>
<td><INPUT type='submit' value='DELETE'></td></tr>

<?php
        echo " <td> " . $pre_number . "</td> ";
        echo " <td> " . $phoneno . "</td> ";
	echo " <td> " . $name . "</td> ";
	echo " <td><div style='text-align: right;'>" . intval($recording->duration/60) . ":" . sprintf('%02d',$recording->duration%60) . "</div></td>";
	echo " <td><a href='https://api.twilio.com" . $recording->uri . "' target='newframe' onclick='playscript($phonename);' ><div style='text-align: center;'>Play</div></a></td>";
	echo " <td><div style='text-align: center;'><input type='checkbox' name='del' value='" . $recording->sid . "'></div></td>";
	Echo " </tr> ";
	echo "</table>";
	echo "</form>";
 	echo "<iframe name='newframe' frameborder='0' height='70' marginheight='50'></iframe>";
	echo "</body></html>";
?>

Open in new window

0
 
LVL 30

Expert Comment

by:Britt Thompson
ID: 39702515
Ok, i see. Since you'r using that table it is a little funky. You may be able to get something like this to work - http://answers.yahoo.com/question/index?qid=20090713155541AAiNtL1
0
 
LVL 39

Author Comment

by:thenelson
ID: 39702548
I have two iframes on this page. The one we are discussing with the wav player (newframe) and another one with text (newframe2). I tried the code on the link you suggested on both frames:
<style type="text/css"> 
#newframe
{ 
position:relative; 
top:-40px; 
} 
</style> 

Open in new window

I also tried  marginheight='40' on both frames.

Both worked to move the text down in iframe newframe2 but both did not work on the wav player in iframe newframe. I am going to try putting an image in the iframe and see if the two methods work on it.
0
 
LVL 39

Author Comment

by:thenelson
ID: 39703134
I have created a test wav file at: test.wav. Clicking on this link in Goggle Chrome plays the wav file while displaying the wav player. Normalizing the Chrome window and reducing its size results in the player eventually scrolling off the top of the window. So I am guessing, it is also not possible to place it in too small an iframe.

I also created a small web page with a link and an iframe so you can play with it to see if the problem is solvable. Here it is: testIframe.html,
0
 
LVL 34

Accepted Solution

by:
Slick812 earned 2000 total points
ID: 39706302
greetings thenelson, , The Chrome browser, when you load a sound WAV file into a iframe as you do with -
<a href='http://www.barnwellmd.com/test.wav' target='newframe'>Play</a>
will configure the layout as a sound player (programming in internal code), NOT as an HTML page, so as far as I can tell you can not use CSS inside the iframe to do anything to the player display. I have used DIV containers to move, size, color elements inside of them, so That's what I do here -
<!DOCTYPE html>
<html><body>
<a href='http://www.barnwellmd.com/test.wav' target='newframe'>Play</a>
<br>
<div style="display:inline-block;height:40px;overflow:hidden;border:2px solid #afc;background:#000;padding-bottom:4px;border-radius:8px;">
<iframe name='newframe' frameborder='0' height='87'></iframe>
</div>
</body></html>

Open in new window

This works for me as I tested it, and it plays with the Click on the Play link, ,
You may want to play with the padding of the DIV and the height of the iframe, to move the sound Player up and down.
Ask questions if you need more info.
0
 
LVL 39

Author Closing Comment

by:thenelson
ID: 39707010
That did it!  Thanks again!!
I modified the div and iframe as you suggested to meet my design:

<div style="display:inline-block;height:18px;overflow:hidden;padding-bottom:4px;border-radius:8px;">
<iframe name='newframe' frameborder='0' height='60'></iframe>
</div>

I don't understand how putting an iframe into a div container would make this work. I guess I need to read up on the div.
0

Featured Post

Want to be a Web Developer? Get Certified Today!

Enroll in the Certified Web Development Professional course package to learn HTML, Javascript, and PHP. Build a solid foundation to work toward your dream job!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).
Suggested Courses

770 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question