HTML5 Embed YouTube Video in Hybrid App without connection

Question

i'm developing an html5 mobile app...i have to create a page with a YouTube Video and some other elements...i use the iframe code to load the video...

<iframe width="100%" height="auto" src="http://www.youtube.com/embed/VIDEO-ID" frameborder="0" allowfullscreen></iframe>

this works...the problem is when a user doesn't have internet connection...i'd like to present an image...How is it possible?! Thanks

Answer 1

Assuming you are okay with javascript:

<script type="text/javascript">
if(navigator.onLine!==true)
    document.getElementsByTagName('iframe')[0].outerHTML='<img src="blah.png">';
</script>

You can use something else instead of document.getElementsByTagName('iframe')[0] if you have more than one iframe in the page.