Why doesn't image show on load, but shows on refresh?
My problem is like the one above, except with multiple video files. On Chrome, videos won't display unless after refresh. On Safari, they seem to display fine. Per the other answer, I'm assuming this has to do with files loading asynchronously and can be fixed by proper use of onload in my jquery, but I'm unfamiliar with how to best do that.
HTML
<html>
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/hinukan/style.css">
</head>
<body>
<div id = "container">
<div id="box1" class = "box">
<div id="video1" class="video"> <video poster loop muted playsinline controls><source src=assets/portrait.mp4></video></div>
<div id="text1" class="text"><p>mytext</p></div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="/hinukan/javascript.js"></script>
</html>
JAVASCRIPT
if ($(".video").css("max-width") == "850px" ){
$(".box").children(".text").click(function() {
$(this).toggleClass("ttoggle");
$(this).siblings(".video").toggleClass("vtoggle");
});
$('video').click(function(){
this[this.paused ? 'play' : 'pause']();
});
}
else {
$(".box").children(".video").click(function () {
if (!$(this).hasClass("vtoggle")) {
$(this).siblings(".text").toggleClass("ttoggle");
$(this).toggleClass("vtoggle");
}
});
$(".box").children(".text").click(function() {
if ($(this).hasClass("ttoggle")) {
$(this).siblings(".video").toggleClass("vtoggle");
$(this).toggleClass("ttoggle");
}
});
$(".video").hover(function () {
$(this).siblings(".text").addClass("tselect");
$(this).children("video")[0].play();
}, function () {
var el = $(this).children("video")[0];
el.pause();
$(this).siblings(".text").removeClass("tselect");
});
}
