Solved
width of audio player
Hi - I tried to ask this question of support and they directed me here. If someone here can answer I will be very grateful. Before I go on: pls note the answer is not given at https://www.qualtrics.com/community/discussion/1994/change-the-audio-player-dimensions-so-that-only-the-play-button-is-displayed!
My surveys ask participants to listen to audio and say what they hear at a particular time.
I like to made the audio player wider (600) so they can see the timer clearly.
I used to be able to do this easily simply by inserting the audio via the rich content editor, clicking 'advanced features' mandating set the width of the audio player to 600.
Now it doesn't work any more. When I set it to width 600 it just displays the same small player.
I have added the html for the player below.
Can anyone figure out why it is not working or how I can fix it? Thanks so much!
Helen
`<audio class="qmedia" controls="true" height="40" preload="auto" width="600"><source src="/CP/File.php?F=F_38DadWi7G9rpOp" type="audio/mp3" /><embed class="qmedia" flashvars="file=/CP/File.php?F=F_38DadWi7G9rpOp&width=600&height=20&type=mp3&autostart=false" height="20" pluginspage="http://adobe.com/flashplayer/" src="/WRQualtricsShared/Flash/flvplayer.swf" type="application/x-shockwave-flash" width="600" wmode="transparent" /></audio>`
Best answer by TomG
> @HelenF said:
> thanks again - but sadly that does not seem to work. (I copied your code exactly into look and feel > style > custom css - hope that is right?). Is there something else I should try?
>
> ALSO it seems qualtrics should write the code correctly directly from the ''advanced prefs" option - this must be something that can be fixed behind the scenes? Is there a way to report the issue? I'm happy to have the right answer now but finding it has delayed my project by days.
>
> Thanks again!
The CSS worked when I copied it to Look & Feel CSS, so I'm not sure why it didn't work for you.
You can report the issue to Qualtrics Support...they may get around to fixing it someday.
View original
+27Replace
```
width="600"
```
with:
```
style="width:600px;max-width:100%;"
```
Brilliant! It works!
Thanks so much.
NOW how do we fix it so it writes the proper code when we set the 'advanced options' as we insert the audio?
Or does it have to be done by hand each time? (THere's lots of times!).
Thanks again - much appreciated.
Helen
+27> @HelenF said:
> Brilliant! It works!
> Thanks so much.
>
> NOW how do we fix it so it writes the proper code when we set the 'advanced options' as we insert the audio?
> Or does it have to be done by hand each time? (THere's lots of times!).
>
> Thanks again - much appreciated.
> Helen
Adding a rue to your Look & Feel CSS so you don't have to add it to every individual audio should work:
```
audio.qmedia, embed.qmedia {
width: 600px;
max-width: 100%;
}
```
thanks again - but sadly that does not seem to work. (I copied your code exactly into look and feel > style > custom css - hope that is right?). Is there something else I should try?
ALSO it seems qualtrics should write the code correctly directly from the ''advanced prefs" option - this must be something that can be fixed behind the scenes? Is there a way to report the issue? I'm happy to have the right answer now but finding it has delayed my project by days.
Thanks again!
+27> @HelenF said:
> thanks again - but sadly that does not seem to work. (I copied your code exactly into look and feel > style > custom css - hope that is right?). Is there something else I should try?
>
> ALSO it seems qualtrics should write the code correctly directly from the ''advanced prefs" option - this must be something that can be fixed behind the scenes? Is there a way to report the issue? I'm happy to have the right answer now but finding it has delayed my project by days.
>
> Thanks again!
The CSS worked when I copied it to Look & Feel CSS, so I'm not sure why it didn't work for you.
You can report the issue to Qualtrics Support...they may get around to fixing it someday.
Oh I see - it works on the front end when I preview/publish - just doesn't display in the edit pane like it does when I add it by hand (makes sense now I think about it!).
Thanks again very much indeed for your rapid and efficient help. Really cheers me up to be able to proceed with my project after days of trying to figure it out myself, waiting ages for support - and then getting no help at all from then.
Leave a Reply
Enter your E-mail address. We'll send you an e-mail with instructions to reset your password.