おしえて

webサイトに動画をはりつけ、クリックすると全面で拡大表示させるには

解決済

質問者：tantankobayashi-san
質問日時：2018/06/03 23:29
回答数：3件

お世話になります。

こちらのサイトの
http://www.muji.com/jp/beadssofa/

PLAY MOVIE
を押すとURLは変わらず全面にyoutubeが再生され、左上のボタンで閉じるようになっています。

これはどのようにすればよいのでしょうか？

通報する

この質問への回答は締め切られました。

質問の本文を隠す

回答 (3件)

ベストアンサー優先
最新から表示
回答順に表示

参考程度に

No.2ベストアンサー

回答者： fujillin
回答日時：2018/06/05 17:52

No1です

ご提示のサイトとそっくり同じ方法でなくとも、同じような結果になれば良いのであれば、スクリプトを用いずともCSSのみでも実現できると思います。

以下は、ごく単純化した一例です。
※ HTMLがわかりやすいように別要素に分割したため、:targetを利用していますが、クリックによってURLのハッシュ部分は変わります。（ページ内リンク利用なので）
input要素の:checkedを利用するような方法で同様のことを行えば、URLを変えずに実現することも可能と思います。
※ 実際に行っているのは、単純な表示/非表示の切り替えだけなので、当然ながらスクリプトでも同様のことが可能です。

ご参考までに。
（このサイトでは、URLが省略され、リンクに変えられてしまいますので、ご注意ください）

<!DOCTYPE HTML>
<html lang="ja">
<head><title>Sample</title>
<style type="text/css">
html, body { width:100vw; height:100vh; }
#main, #videoBox {
width:100%; height:100%;
background-color:#FFF;
position:absolute; top:0; left:0;
}
a { font-weight:bold; text-decoration:none; }

#main { padding:3em; }
#main a {
font-size:24px;
padding:8px 16px; border-radius:12px;
color:#FFF; background-color:#68C;
}

#videoBox>div {
position:absolute;
width:90%;
top:50%; left: 50%;
transform:translate(-50%, -50%);
}
#videoBox iframe { width:90vw; height:45vw; }
#videoBox>a { font-size:42px; color:#000; float:right; }
#videoBox { display: none; }
#videoBox:target { display: block; }
</style>

</head>
<body>
<div id="main">
<a href="#videoBox">PLAY MOVIE</a>
</div>

<div id="videoBox">
<a href="#">×</a>
<div>
<iframe src="https://www.youtube.com/embed/TMw4kIJJLDs" frameborder="0"></iframe>
</div></div>
</body>
</html>

- 0
- 件

通報する

この回答へのお礼

CSSのみで実装する方法を教えてくださりありがとうございました！

通報する

お礼日時：2018/07/10 18:35

No.3

回答者： torayoshi
回答日時：2018/06/05 20:34

jQuery Video LightBox Pluginで簡単に実装できますよ。

https://html5box.com/html5lightbox/

- 0
- 件

通報する

参考程度に

No.1

回答者： fujillin
回答日時：2018/06/04 10:06

こんにちは

ちゃんと調べてはいませんので、半分は想像です。

ご提示のサイトのソースを見てみればわかりますが、「PLAY MOVIE」の部分はリンクになっていて、youtubeへのリンクが貼られています。
一方で、下方にvideoを表示するための要素（div要素)が用意されていて、上記をクリックした際にはそこにiframeでリンク先のサイトを直接表示するしくみにもなっている様です。

＞全面にyoutubeが再生され、～
iframeのサイズは全面というより固定で、width="853" height="480"に設定されているようです。

私の環境では、PCからはiframeが表示されますが、スマホのブラウザからだとリンクで指定されているアドレスに遷移しますね。
　ttps://www.youtube.com/watch?v=TMw4kIJJLDs

想像するところ、クリック時の処理として、スクリプト等で環境を判断し、何もしない（＝リンク先へジャンプ）、あるいは、div内にiframe要素を追加生成した上で、こちらを表示するようにしているものと思います。
（ページ内にスクリプトが多数用いられていて探すのが面倒なので、確認はしていません）