<!DOCTYPE html> <html dir="ltr" lang="en-US"> <head> <meta charset="utf-8" /> <title>{{object.title|safe}}</title> <style> body { background: #222; } .overlay { background-color: #000; opacity: .9; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 10; } .btn { position: absolute; z-index: 11; left: 35%; top: 40%; } @media only screen and (max-device-width: 1024px) { img#giffy { width: 100%; } } </style> <script src="http://luxagraf.net/media/js/jquery.js" type="text/javascript"></script> <script> var isiPad = false; var playing = true; if (navigator.userAgent.match(/iPad/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i)) { isiPad = true; } $(function() { function togglebtn() { if (playing) { document.getElementById('snd').pause(); playing = false } else { document.getElementById('snd').play(); playing = true } } document.body.onclick=togglebtn if (isiPad) { var overlay = document.createElement("div"); overlay.setAttribute("id","overlay"); overlay.setAttribute("class", "overlay"); document.body.appendChild(overlay); // create image and append to page var img = document.createElement("img"); img.setAttribute("id","img"); img.src = "btn.png"; img.setAttribute("class","btn"); // click to restore page img.onclick=restore; document.body.appendChild(img); function restore() { document.body.removeChild(document.getElementById("overlay")); document.body.removeChild(document.getElementById("img")); playing = false; document.getElementById('snd').play(); } } }); </script> </head> <body id="home"> {%if object.music_ogg %}<audio id="snd" preload="auto" loop autoplay autobuffer> <source src="{{object.music_ogg.url}}" type="video/ogg"/> <source src="{{object.music_mp3.url}}" /> </audio>{%endif%} <img id="giffy" src="{{object.gif.url}}" alt="{{object.title}}" /> </body> </html>