<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>List Image</title>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<meta name="robots" content="noindex, nofollow">
<meta name="googlebot" content="noindex, nofollow">
<link href='//fonts.googleapis.com/css?family=Oxygen:400,700,300' rel='stylesheet' type='text/css'>
<link href='//fonts.googleapis.com/css?family=Open+Sans:400,300,600,700,800' rel='stylesheet' type='text/css'>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script type="text/javascript">
$(window).load(function() {
$(".loader").fadeOut("slow");
});
</script>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script>
$(function() {
$(".video").click(function () {
var theModal = $(this).data("target"),
videoSRC = $(this).attr("data-video"),
videoSRCauto = videoSRC + "?modestbranding=1&rel=0&controls=0&showinfo=0&html5=1&autoplay=1";
$(theModal + ' iframe').attr('src', videoSRCauto);
$(theModal + ' button.close').click(function () {
$(theModal + ' iframe').attr('src', videoSRC);
});
});
});
</script>
<script>
document.addEventListener('DOMContentLoaded', function(){
var v = document.getElementById('v');
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
var cw = Math.floor(canvas.clientWidth / 100);
var ch = Math.floor(canvas.clientHeight / 100);
canvas.width = cw;
canvas.height = ch;
v.addEventListener('play', function(){
draw(this,context,cw,ch);
},false);
},false);
function draw(v,c,w,h) {
if(v.paused || v.ended) return false;
c.drawImage(v,0,0,w,h);
setTimeout(draw,20,v,c,w,h);
}
</script>
</script>
<script>
document.addEventListener('DOMContentLoaded', function(){
var v = document.getElementById('v');
var canvas = document.getElementById('c');
var context = canvas.getContext('2d');
var cw = Math.floor(canvas.clientWidth / 100);
var ch = Math.floor(canvas.clientHeight / 100);
canvas.width = cw;
canvas.height = ch;
v.addEventListener('play', function(){
draw(this,context,cw,ch);
},false);
},false);
function draw(v,c,w,h) {
if(v.paused || v.ended) return false;
c.drawImage(v,0,0,w,h);
setTimeout(draw,20,v,c,w,h);
}
</script>
<script type="text/javascript">// <![CDATA[
function preloader(){
document.getElementById("loading").style.display = "none";
document.getElementById("content").style.display = "block";
}//preloader
window.onload = preloader;
// ]]></script>
<style type="text/css">
li a{color:#fafafa;background:#ffffff;padding:0px;display:block;text-decoration:none;}
a:link {
background-color: rgba(rgb(0, 10, 1)); /* Green */
padding: 0px 0px;
cursor: pointer;
font-size: 14px;
margin: 0px 0px
}
a:hover {
background-color: #333333;}
li{
list-style-type: none;
}
.style1 {
color: #FFFFFF;
font-weight:900;
}
</style>
<style>
div.img {
border: 2px solid #fff;
}
div.img:hover {
border: 2px solid #777;
}
div.img img {
width: 100%;
height:inherit;
}
div.desc {
padding: 0px;
text-align: justify;
font-weight:900;
background:rgb(59, 60, 57);
}
* {
box-sizing: border-box;
}
.responsive {
padding: 0px 0px;
float: left;
width: 19.99999%;
}
@media only screen and (max-width: 700px){
.responsive {
width: 49.99999%;
margin: 2px 0;
}
}
//medium+ screen sizes
@media (min-width:992px) {
.desktop-only {
display:block important;
}
}
//small screen sizes
@media (max-width: 991px) {
.mobile-only {
display:block !important;
}
.desktop-only {
display:none !important;
}
}
@media only screen and (max-width: 500px){
.responsive {
width: 49.99999%;
margin: 0px 0;
padding-bottom:0px;
position:relative;
display:inline-block;
height:100%;
}
}
.clearfix:after {
content: "";
display: table;
clear: both;
}
li{
list-style-type: none;
}
</style>
<style>
.thumb {position: relative; width: 100%; height: 270px;}
.thumb a {position: absolute; top: 0px; display: block; width: 100%; height: 99%; text-align: center; text-decoration: none;}
.thumb a:hover .play, .thumb a:hover .overlay {display: block; transition: opacity .25s ease-in-out;-moz-transition: opacity .20s ease-in-out;-webkit-transition: opacity .4s ease-in-out;}
.thumb a:hover .play {position: relative; font-size: 140px; color: #fdfdfd; margin-top: -225px; z-index: 1000; opacity: 1;}
.thumb a:hover .overlay {position: absolute; top: 0; width: 100%; height: 100%; background-color: #000000; opacity: .5;}
.thumb a {
color: #uuuFF0;
text-decoration: none;
</style>
<?php include('_connect.php'); ?>
</head>
<div class="main">
<body>
<div class="container">
<?php include('searching.php'); ?>
<?php
include('_connect.php');
$result = mysql_query(" SELECT * FROM film ORDER BY Rand() LIMIT 60");
while($row=mysql_fetch_assoc($result))
{
echo '<li class="responsive">';
echo '<div>
<div class="img"> <div class="thumb">
<a><div class="btn btn-success btn-lg video" data-video= "http://www.tvnmovie.info/film/play.php?id='.$row['id'].'" class="favorites" data-toggle="modal" data-target="#videoModal" />
<img src="data/img/'.$row['imgfilm'].'" alt="'.$row['titlefilm'].'" width="100%" height="auto"></center>
<span class="play">►</span>
<div class="overlay">
</div> </a>
</div>';
echo '</li>';
}
?>
<style type="text/css">
#Video1
{
position:absolute;
top: 50px;
left:0px;
width:1000px;
border:2px solid blue;
display:block;
z-index:99;
}
</style>
<div class="modal fade" id="videoModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-body">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">x </span></button>
<iframe width="100%" height="620" src="" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
</div>
</body>
</html>
