html - Safari is not showing a webpage -


the webpage not showing in safari, other browsers rendering --> firefox, chrome (i not counting ie, need not check in ie). want reason why webpage not being shown in safari. may possible reason?

<!doctype html public "-//w3c//dtd xhtml 1.0 transitional//en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="content-type" content="text/html; charset=utf-8" /> <title>one-great-thing</title>  <style> body {     margin: 0;     padding: 0;     font-size: 62.5%; }  #image-slider {     position: relative; }  #image-slider > div {     overflow: hidden; }  #container {     position: relative;     overflow: hidden; } #container .content{     position: absolute;     top: 10%;     left: 0;     color: #000;     text-align: center;     width: 100%;     font-size: 6em;     padding: 80px 0px;     font-weight: bold;     background: rgba(255,255,255,0.6);     text-shadow: 3px 3px rgba(255, 255, 255, 0.5);     text-decoration: none; } #container .content a{     color: #000;         font-family: 'myriad-std-tilt', sans-serif;     text-decoration: none;     font-size: 18px; }  #container .content a.round img:hover{  border: 3px solid #003366;  border-radius: 50%; }  </style> <script src="js/jquery.min.js"></script> <script type="text/javascript"> $(function() {      // ie detect     function iedetect(v) {          var r = regexp('msie' + (!isnan(v) ? ('\\s' + v) : ''), 'i');         return r.test(navigator.useragent);      }      // mobile screens, show image called 'poster.jpg'. mobile     // screens don't support autoplaying videos, or ie.     if(screen.width < 800 || iedetect(8) || iedetect(7) || 'ontouchstart' in window) {          (adjsize = function() { // create function called adjsize              $width = $(window).width(); // width of screen             $height = $(window).height(); // height of screen              // resize image accordingly             $('#container').css({                 'background' : 'url(ogt.png)',                  'background-size' : 'cover',                  'width' : $width+'px',                  'height' : $height+'px'             });              // hide video             $('video').hide();          })(); // run instantly          // run on resize         $(window).resize(adjsize);     }     else {          // wait until video meta data has loaded         $('#container video').on('loadedmetadata', function() {              var $width, $height, // width , height of screen                 $vidwidth = this.videowidth, // width of video (actual width)                 $vidheight = this.videoheight, // height of video (actual height)                 $aspectratio = $vidwidth / $vidheight; // ratio video's height , width in              (adjsize = function() { // create function called adjsize                  $width = $(window).width(); // width of screen                 $height = $(window).height(); // height of screen                  $boxratio = $width / $height; // ratio screen in                  $adjratio = $aspectratio / $boxratio; // ratio of video divided screen size                  // set container width , height of screen                 $('#container').css({'width' : $width+'px', 'height' : $height+'px'});                   if($boxratio < $aspectratio) { // if screen ratio less aspect ratio..                     // set width of video screen size multiplied $adjratio                     $vid = $('#container video').css({'width' : $width*$adjratio+'px'});                  } else {                     // else set video width of screen/container                     $vid = $('#container video').css({'width' : $width+'px'});                 }              })(); // run function              // run function on window resize.             $(window).resize(adjsize);          });     }  }); </script> </head>  <body> <div id="container">     <video autoplay loop muted style="width: 100%;" poster="ogt.png">         <source src="ogt-home.ogv" type="video/ogg" />         <source src="ogt-home.mp4" type="video/mp4">         <source src="ogt-home.webm" type="video/webm">     </video>     <div class="content">     <a class="round" href="index2.html"><img src="128x128.png"></a><br /><br />     <a class="ytube" href="http://youtube.com/somelink">watch on <br /><img src="images/ytube.png" /></a><br /><br />         <a href="index2.html"> enter website</a>     </div> </div>  </body> </html> 

above code of page . btw image files , video files needed not providing here, assuring links perfect checked in firefox , chrome.

another thing want mention, found if remove absolute position attribute of content block, it's showing content block in safari(though video not showing, may found somewhere html5 autoplay doesn't work on safari).

please provide me solution safari.


Comments

Popular posts from this blog

asp.net mvc - SSO between MVCForum and Umbraco7 -

Python Tkinter keyboard using bind -

ubuntu - Selenium Node Not Connecting to Hub, Not Opening Port -