Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 456
  • Last Modified:

vertically center Google Chrome wav player in iframe

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
thenelson
Asked:
thenelson
  • 8
  • 6
1 Solution
 
Britt ThompsonSr. Systems EngineerCommented:
Did you try setting the href to display:block and configure padding to push it down in the iframe?
0
 
thenelsonAuthor Commented:
How would I do that?
0
 
Britt ThompsonSr. Systems EngineerCommented:
<a href='https://api.twilio.com/Recordings/RE...'  style="display:block; padding:25px" target='newframe'>
0
What Kind of Coding Program is Right for You?

There are many ways to learn to code these days. From coding bootcamps like Flatiron School to online courses to totally free beginner resources. The best way to learn to code depends on many factors, but the most important one is you. See what course is best for you.

 
thenelsonAuthor Commented:
That change added padding above the link instead of in the iframe.
0
 
Britt ThompsonSr. Systems EngineerCommented:
Try this instead - style="position:relative; top:20px; display:block;"

You may need to apply height and width to the href as well.
0
 
thenelsonAuthor Commented:
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
 
Britt ThompsonSr. Systems EngineerCommented:
Can you take a screen shot of where the "link is moved down?"
0
 
thenelsonAuthor Commented:
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
 
Britt ThompsonSr. Systems EngineerCommented:
I think you're going to have to post your code something is missing on the backend that I'd have to see.
0
 
thenelsonAuthor Commented:
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
 
Britt ThompsonSr. Systems EngineerCommented:
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
 
thenelsonAuthor Commented:
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
 
thenelsonAuthor Commented:
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
 
Slick812Commented:
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
 
thenelsonAuthor Commented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 8
  • 6
Tackle projects and never again get stuck behind a technical roadblock.
Join Now