Why is the audio tag not visible after toggling the visibility of an iframe?

I'm experiencing an issue with an iframe containing audio/video tags on a webpage loaded in an iframe. When I hide and show the iframe on an iPad, the tags disappear. 

<button onclick="toggle();">Toggle Iframe</button>
<iframe id='page' src='http://www.quackit.com/common/html_editor_form.cfm?contentFile=../html_5/tags/inc_html_audio_tag.cfm' width="100%" frameborder='1'></iframe>

<script>
    function toggle() {
        var $el = $('#page');
        if ($el.is(':visible')) {
            $el.hide();
        } else {
            $el.show();
        }
}
</script>

Demo: http://jsfiddle.net/codef0rmer/sQVCd/

Any suggestions for fixing this issue?

htmlipadcssaudioiframe

Answer №1

I attempted a solution by utilizing the visibility property to hide the iframe, and this approach proved effective for me on an iPad as well.

if ($el.css('visibility') === 'visible') {
  $el.css('visibility', 'hidden');
} else {
  $el.css('visibility', 'visible');
}

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Unusual discovery: Mysterious object manifesting in my HTML on Chrome/Webkit (with visual evidence and interactive demonstration)

I'm at a loss with this peculiar artifact that has appeared in my HTML - take a look at this highly magnified screenshot: Highlighted in red is this bizarrely small line. I've scoured my code but can't seem to pinpoint its origin. I'v ...

htmlcssgoogle-chromewebkit

How can I adjust margins based on the positioning of surrounding elements?

Apologies if the title is not accurate, but I will try my best to explain clearly. If you have any ideas on how to improve it, please share, and I will make changes. Here is the issue I am facing: https://i.sstatic.net/kGMjw.png (I apologize for any lang ...

jqueryhtmlcsstwitter-bootstrap

Prevent ng-repeat from rendering the contents of my div

Currently, I am in the process of modifying a website for which I need AngularJS. I am trying to use the ng-repeat command to display some documentation on the site. However, whenever I add the ng-repeat within a div, it seems to "destroy" the layout and I ...

javascripthtmlangularjs

Change the image displayed when hovering over the div containing it

I've come to a roadblock while attempting to change an image when hovering over its containing div. I could achieve this using CSS, but I have 6 divs with 6 images inside them. If I were to use CSS, I'd need 6 sets of hover events to swap the ba ...

javascriptjqueryhtmlcsshover

How can I shift the position further to the left in the navbar-toggler of Bootstrap?

I am looking to adjust the positioning of the navbar-toggler-icon and menus on my website. Despite trying to make changes in the CSS, only the icon image shifts while the menus remain unchanged. Can anyone provide assistance? Thank you. Visit this link fo ...

cssbootstrap-4

Align the <div> vertically within the <td> tag

My current set up looks something like this: <tr> <td> <div class="blue">...</div> <div class="yellow">...</div> </td> <td> <div class="blue">...</div> <div class="yellow ...

htmlcss

What is the best way to display a particular JavaScript variable in an HTML document?

Is there a way to display the value of a Javascript variable in an HTML form, such as showing it on the screen? Below is my JavaScript code: <script type="text/javascript"> var howLongIsThis = myPlayer.duration(); </script> The variable howL ...

javascripthtml

Any tips on showing inline input within an li element?

HTML Code: <div id="choices"> <ul> <li> <label for="input_size">Input Size</label> <input type="text" id="input_size"> </li> <li> ...

htmlcss

Switch up the animation based on the state in AngularJS

In my AngularJS application, I have implemented CSS animations for transitioning between states. The animations involve sliding content from left to right with specific timings and transforms. .content.ng-enter, .content.ng-leave { -webkit-animation-t ...

javascriptcssangularjsanimation

Searching for specific expressions within HTML files on Windows can be accomplished using the grep or findstr commands, allowing you to display the

I am trying to use grep or findstr to extract the correct IMDB number when searching for a specific movie by its title. For example, the movie "Das Boot" is listed on IMDB with the movie number tt0082096. Currently, I am attempting to search through HTML ...

htmlgrepfindstr

Unable to alter the background color of the text box

I am currently struggling with my code where I am trying to overlay a text box on an image. Even after setting the background color to white, it still shows up as transparent. I have successfully done this in the past, but for some reason, it is not work ...

htmlcssbackground-color

Experiencing difficulty adjusting the width of a Tumblr post with JavaScript or jQuery?

Calling all coding experts! I've been working on customizing a Tumblr theme, and everything is looking good except for one issue. I'm struggling to adjust the width of photos on a permalink (post) page. Check out this link: You'll notice t ...

javascriptjqueryhtmlcss

Utilizing Regex Patterns to Manipulate CSS Attributes

I am dealing with a string containing CSS properties and their values: str = "filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#cccccc', endColorstr='#000000'); background: -webkit-linear-gradient(top, black, wh ...

javascriptcssregex

``Are you searching for a way to determine the quantity of elements within a DOM tree

I am working with an unordered list (ul) and I need to determine the number of a specific list item (for example: Tomato's number is 3). <li>Apple</li> <li>Orange</li> <li>Tomato</li> <li>Potato</li> D ...

javascripthtmlvue.jsfrontend

"A lengthy contenteditable div designed to mimic an input field, with the ability to horizontally scroll

When the input is too short for the entire text to be displayed, users have the option to horizontally scroll the text inside the input by dragging with the mouse. Is there a way to implement this functionality in a contenteditable field that appears as ...

javascripthtmlcssinputcontenteditable

Exploring the integration of HTML5 in ASP.NET applications

Can you provide a sample demonstrating how I can implement offline caching using HTML code in my ASP.Net application? ...

asp.nethtml

Attempting to layout Bootstrap cards in a horizontal manner by utilizing the grid system

I'm facing an issue where I am attempting to have one card span across two different rows, but I am unable to align it horizontally. Click here for the imagetps://i.sstatic.net/Mi9PZ.png ...

htmlvue.jsgrid

Tips for preventing errors in formatting?

I created a field using rectangles as divs. However, when I add content to the rectangle divs, the formatting gets messed up. Can anyone help me fix this issue? Here's the link <div class='line' id='line1'> <div class=& ...

htmlcss

The Ajax:Calendar has a small content display, making it difficult for me to view all the days at once

I am currently utilizing Ajax Calendar v3.0.20820.6783 in my Asp.net-3.5 project and it is functioning properly. However, I am facing a CSS problem that I have been unable to resolve. The calendar appears small and some days like Saturday and Sunday are m ...

cssasp.netajaxasp.net-ajax

Arranging the local storage scores in increasing order

I am trying to organize the table data in ascending order, with the person having the highest score appearing at the top and the person with the lowest score at the bottom. I have been working on creating an array and using a for loop to sort the data ac ...

javascripthtmlarraysfor-looplocal-storage