The webpage is not showing in Safari, but all other browsers are rendering it properly like --> Firefox, Chrome (I am not counting IE, I need not check it in IE). I just want the reason why the webpage is not being shown in Safari. What may be the possible reason?
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ift.tt/kkyg93">
<html xmlns="http://ift.tt/lH0Osb">
<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);
}
// For mobile screens, just show an image called 'poster.jpg'. Mobile
// screens don't support autoplaying videos, or for IE.
if(screen.width < 800 || iedetect(8) || iedetect(7) || 'ontouchstart' in window) {
(adjSize = function() { // Create function called adjSize
$width = $(window).width(); // Width of the screen
$height = $(window).height(); // Height of the 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 too
$(window).resize(adjSize);
}
else {
// Wait until the video meta data has loaded
$('#container video').on('loadedmetadata', function() {
var $width, $height, // Width and height of screen
$vidwidth = this.videoWidth, // Width of video (actual width)
$vidheight = this.videoHeight, // Height of video (actual height)
$aspectRatio = $vidwidth / $vidheight; // The ratio the video's height and width are in
(adjSize = function() { // Create function called adjSize
$width = $(window).width(); // Width of the screen
$height = $(window).height(); // Height of the screen
$boxRatio = $width / $height; // The ratio the screen is in
$adjRatio = $aspectRatio / $boxRatio; // The ratio of the video divided by the screen size
// Set the container to be the width and height of the screen
$('#container').css({'width' : $width+'px', 'height' : $height+'px'});
if($boxRatio < $aspectRatio) { // If the screen ratio is less than the aspect ratio..
// Set the width of the video to the screen size multiplied by $adjRatio
$vid = $('#container video').css({'width' : $width*$adjRatio+'px'});
} else {
// Else just set the video to the width of the screen/container
$vid = $('#container video').css({'width' : $width+'px'});
}
})(); // Run function immediately
// Run function also 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://ift.tt/1DKIXm0">Watch Us On <br /><img src="images/ytube.png" /></a><br /><br />
<a href="index2.html"> Enter Into The Website</a>
</div>
</div>
</body>
</html>
Above is the code of the page . BTW the image files and video files needed I am not providing here, but I am assuring all the links are perfect as checked in Firefox and Chrome.
Another thing I want to mention, I found that if I remove the absolute position attribute of the content block, then It's showing the content block perfectly in Safari(though video is not showing, may be I found somewhere the HTML5 autoplay doesn't work on Safari).
Please provide me a solution for Safari.
Aucun commentaire:
Enregistrer un commentaire