前提
ブラウザはChromeしか試していません。PHP+SQLite3で作っています。（PHP 5.5.19、SQLite 3.6.20）
概要
youtubeから適当に動画を持ってくる。画面をクリックしても何も反応しないようにするための工夫が必要で、今回、CSSのz-indexを使って実現してみました。動画の管理（追加、削除）は適当に作っています。
期待される効果
子供は閲覧中も閲覧後も画面のどこをクリックしようが別ページに飛ぶことはなく、親が厳選した少数の動画しか見られないのですぐに飽きてくれる。
限界
子供がブラウザの操作を覚えたら効果はなくなる。
コード
まず、DBを用意します。PHPからSQLite3を操作して作ることにします。youtubeから必要な情報は埋め込みコードのURL部分だけです。ただ画像リストのようにしたいので画像アドレスも入れるようにしています。
setup.php
<?php
$db = new PDO("sqlite:youtube.db");
$db->exec("CREATE TABLE IF NOT EXISTS list (
id INTEGER PRIMARY KEY,
title TEXT,
url TEXT,
image TEXT
)");
$db = null;
?>
次に、youtubeから動画を拾ってきて登録、削除をする管理画面を適当に作ります。
kanri.php
<?php
$db = new PDO("sqlite:youtube.db");
$stmt = $db->query("SELECT * FROM list");
$html = "";
if ($stmt) {
$list = $stmt->fetchAll(PDO::FETCH_ASSOC);
foreach ($list as $item) {
$html .= $item["id"].":".$item["title"]."<a href='del.php?delid={$item["id"]}'>削除する</a><br><br>";
$html .= "<img src={$item["image"]}><br><br>";
}
}
$db = null;
?>
<html>
<body>
<?php echo $html; ?>
<form action="ins.php" method="post">
タイトル：<input type="text" name="title"><br><br>
埋め込みコードのURL部分:<input type="text" name="url"><br><br>
画像アドレス:<input type="text" name="image"><br><br>
<input type="submit" name="ins" value="登録">
</form>
</body>
</html>
登録処理
ins.php
<?php
if (isset($_POST["ins"])) {
/* データ受取 */
$title = htmlspecialchars($_POST["title"], ENT_QUOTES, "UTF-8");
$url = htmlspecialchars($_POST["url"], ENT_QUOTES, "UTF-8");
$image = htmlspecialchars($_POST["image"], ENT_QUOTES, "UTF-8");
/* DB接続、追加、DB切断 */
$db = new PDO("sqlite:youtube.db");
$sql = "INSERT INTO list (title, url, image) VALUES (?, ?, ?)";
$stmt = $db->prepare($sql);
$stmt->execute(array($title, $url, $image));
$db = null;
/* 管理画面に戻る */
header("Location:kanri.php");
}
?>
削除処理
del.php
<?php
if (isset($_GET["delid"])) {
$delid = htmlspecialchars($_GET["delid"], ENT_QUOTES, "UTF-8");
$db = new PDO("sqlite:youtube.db");
$sql = "DELETE FROM list WHERE id = ?";
$stmt = $db->prepare($sql);
$stmt->execute(array($delid));
$db = null;
header("Location:kanri.php");
}
?>
表示画面
show.php
<?php
$db = new PDO("sqlite:youtube.db");
$stmt = $db->query("SELECT * FROM list");
$list = $stmt->fetchAll(PDO::FETCH_ASSOC);
$html = "";
foreach ($list as $item) {
$html .= "<a href='#' url={$item["url"]} onclick='show(this);return false;'><img src={$item["image"]}></a> ";
}
$db = null;
?>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script type="text/javascript">
function show(e) {
var url = e.getAttribute("url");
// オプションを加える（自動再生は必須）
url = url + "?controls=0&showinfo=0&autoplay=1&rel=0";
var out = '<iframe width="640" height="360" src="'+url+'" frameborder="0" allowfullscreen></iframe>';
document.getElementById("main").innerHTML = out;
}
</script>
</head>
<body>
<div id="main"></div>
<div id="list">
<hr>
<?php echo $html; ?>
</div>
</body>
</html>
style.css
# main {
position: absolute;
top: 10px;
width: 640px;
height: 360p;
/* ここが唯一のポイント（自分の場合ですけど） */
z-index: -1;
}
iframe {
position: absolute;
top: 10px;
width: 640px;
height: 360px;
}
# list {
position: absolute;
top: 380px;
}
z-indexについて
正直、よく分からず。
[https://app.codegrid.net/entry/z-index-1]
ここを参考に試行錯誤したらうまくいったというだけです。階層的に#mainをiframeの上に持っていけばクリックしても無反応になるという読みでz-indexに行き着いた次第です。最初透明の背景画像を用意して動画の上にかぶせればとか、いろいろ考えたりしたのですがそんなことはしなくてもできました。
解せないのは#mainに-1のz-indexを与えると#mainの方が小さいんだから階層関係はiframe>#mainになるのではないかと思うのですが。とりあえず結果オーライということで。