質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.51%
CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

Q&A

解決済

3回答

2166閲覧

Youtubeの動画を背景画像として表示させる方法について

uio

総合スコア19

CSS3

CSS(Cascading Style Sheet)の第3版です。CSS3と略されることが多いです。色やデザインを柔軟に変更することが可能になります。

HTML5

HTML5 (Hyper Text Markup Language、バージョン 5)は、マークアップ言語であるHTMLの第5版です。

JavaScript

JavaScriptは、プログラミング言語のひとつです。ネットスケープコミュニケーションズで開発されました。 開発当初はLiveScriptと呼ばれていましたが、業務提携していたサン・マイクロシステムズが開発したJavaが脚光を浴びていたことから、JavaScriptと改名されました。 動きのあるWebページを作ることを目的に開発されたもので、主要なWebブラウザのほとんどに搭載されています。

レスポンシブWebデザイン

レスポンシブWebデザイン(RWD)は、スクリーンのサイズ、プラットフォーム、オリエンテーションに基づいて様々なデバイスで最適のサイトを生成するのウェブデザインとその開発のアプローチ方法を呼びます。

0グッド

0クリップ

投稿2016/08/16 21:36

編集2016/08/17 23:30

お世話になります。

現在、Youtubeの動画を背景画像として実装しようとトライしていて、
以下のようにコードを書いています。

【HTML】

<div class="mainVideo"> <a href="https://www.youtube.com/watch?v=HmZKgaHa3Fg"> <img class="bg" src="img/movie.png" alt=""> <img class="play" src="img/play.png" alt=""> </a> </div>

【CSS】

.mainVideo { margin-top: 10px; width: 100%; position: relative; } .mainVideo a { width: 100%; height: auto; position: relative; display: inline-block; } .mainVideo a img.bg { position: relative; width: 100%; height: auto; top: 0; left: 0; } .mainVideo a img.play { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); }

Youtubeの再生ボタンを押すと、その場で再生するようにしたいのですが、
どうしてもYoutubeサイトに飛んでしまいます。

その場で再生する方法がわかりません。

もし何かお分かりの方がいらっしゃいましたら、ぜひご教授ください。
どうぞよろしくお願い申し上げます。

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答3

0

HTMLとCSSはプログラミング言語ではない・・・というのはさておき、参考サイトのソースを見て同じように書かれたのだと思いますが、これだけでは画面に要素を表示することしかできません。

<a href="https://www.youtube.com/watch?v=HmZKgaHa3Fg">

HTMLのa要素はhref属性で指定したURLに遷移するリンクなので、これを書いただけだと普通にリンク先に飛んでしまいます。

じゃあ参考サイトは何をやっているのかというと、その挙動を制御するプログラムを書いて、遷移せずにYoutubeをフルスクリーンにして動画を再生しています。

質問にJavaScriptタグをつけているからには、JavaScriptを使うというところまではわかっていそうですが…
JavaScriptのソースは見てみましたか?
この参考サイトのJSコードはminifyされていなくてわりと見やすくてわかりやすいと思います。

↓この行を探してみてください。

new js.JQuery(".mainVideo a").bind("click",function(e) {

投稿2016/08/17 00:43

NatsumiOki

総合スコア1298

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

uio

2016/08/17 07:02 編集

>NatsumiOki様 ご指摘いただきありがとうございます。 初歩的な部分での認識不足がありまして、申し訳ありません。 参考サイトの該当のJS部分をそのまま一旦ソースをコピペして実装してみましたがうまくいかず、今の段階はコードの解読も正直難しい状況でしたため、もう一度コードを見ながら何がどうなっているのかわかるように勉強したいと思います。 ありがとうございました。
guest

0

自己解決

その後、YouTube Player APIを使って実装しようと試しましたが、
力不足で思った動きを実装できなかったので、CSSでいろいろ模索しましたところ、
CSSとポップアップで希望の動きを実装することができました。

ただ、APIを使う方法は知らなかったので、大変勉強になりました。
参考サイトのようなJSを理解できるように、勉強に精進していきます。

NatsumiOki様、kei344様、この度はアドバイスいただきありがとうございました。


ちなみに、解決した方法ですが、

http://blog.shuffleee.com/2642/

上記のサイトを参考にしました。

実装したかった内容としては、まず動画の初期表示画像をサムネイルにして、サムネイルクリックで
動画を画面いっぱいに表示させる+クローズボタンも実装する、という内容です。

Magnific Popupはレスポンシブにも対応しているようだったので、大変助かりました。

投稿2016/08/17 23:21

編集2016/08/19 03:58
uio

総合スコア19

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

kei344

2016/08/18 01:51

どのように実装したかコードを回答欄に追記いただけませんか?このページに辿り着いた同じ疑問を持つ人のために、ぜひお願いします。
uio

2016/08/19 04:00

すみませんでした、解決方法を解答欄に追記させていただきました。
guest

0

「サイト背景全面動画プラグイン」を探すか、

【Youtube動画をWEBサイトに埋め込んで背景いっぱいに表示させる方法[jQuery tubular] | 札幌のホームページ・ウェブ制作会社monomode】
http://monomode.co.jp/web/fullscreenvideotech.html

YouTube Player API を使って組む、とかですかね。

【YouTubeの動画を背景全面に表示する | cly7796.net】
http://cly7796.net/wp/css/view-the-youtube-in-the-background/

【YouTube Player APIを使う時のtips集 | Tips Note by TAM】
http://www.tam-tam.co.jp/tipsnote/javascript/post9896.html

投稿2016/08/17 01:15

kei344

総合スコア69357

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

uio

2016/08/17 08:29 編集

>kei344様 いつもお世話になっております。 ご返信ありがとうございます。 参考サイト等もたくさんありがとうございました。 いただいた参考サイトの「Youtube Player API」を使うやり方が、今の自分でも何とか解読できそうでしたため、こちらを使う方法で実装を試しておりました。 まだ実装までには至ってないですが、なんとかできるよう粘って頑張ります。 ありがとうございました。
guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.51%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問