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

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

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

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

HTML5

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

YouTube API

YouTube APIはYouTubeのビデオコンテンツと機能性をウェブサイト、アプリケーション、デバイスに統合することを可能にします。

JavaScript

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

Q&A

0回答

407閲覧

iframe APIをレスポンシブで自動再生したい

wanima

総合スコア0

CSS3

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

HTML5

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

YouTube API

YouTube APIはYouTubeのビデオコンテンツと機能性をウェブサイト、アプリケーション、デバイスに統合することを可能にします。

JavaScript

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

0グッド

1クリップ

投稿2020/08/12 13:06

前提・実現したいこと

iframe APIをレスポンシブで実装する。
その際iframe要素が画面内に入ったら自動再生し、それ以外の時はpauseする実装をしたい。

発生している問題・エラーメッセージ

iframeをレスポンシブで実装するために.embedというclassをつけたdiv要素をposition:absoluteしているのですが、 恐らくその影響でoffsetTopで取得したiframe要素の値が0になってしまっています。 そのため、iframe要素が画面内にあるかどうかの判定ができず、常に画面外にあるという判定をされている状況だと思います。

該当のソースコード

<!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> <title>Docment</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { margin: 800px 0; } ul { padding: 0; margin: 0 auto; width: 640px; list-style: none; } li+li { margin-top: 500px; } .container { position: relative; width: 100%; height: 0; padding-top: 56.25%; } .embed { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } </style> </head> <body> <ul> <li> <div class="container"> <div class="embed" id="player01"></div> </div> </li> <li> <div class="container"> <div class="embed" id="player02"></div> </div> </li> <li> <div class="container"> <div class="embed" id="player03"></div> </div> </li> </ul> <script> var tag = document.createElement("script"); tag.src = "https://www.youtube.com/iframe_api"; var firstScriptTag = document.getElementsByTagName("script")[0]; firstScriptTag.parentNode.insertBefore(tag, firstScriptTag); var iframePlayerLists = []; var iframeDataLists = [{ id: "BAEn_W_98Xo", area: "player01" }, { id: "BAEn_W_98Xo", area: "player02" }, { id: "BAEn_W_98Xo", area: "player03" }]; function onYouTubeIframeAPIReady() { for (var i = 0; i < iframeDataLists.length; i++) { iframePlayerLists[i] = new YT.Player(iframeDataLists[i]["area"], { width: 640, height: 390, videoId: iframeDataLists[i]["id"], events: { "onReady": function (event) { event.target.mute() } } }); } }; window.addEventListener("scroll", function () { for (var i = 0; i < iframeDataLists.length; i++) { var iframePlayer = iframePlayerLists[i]; //.embedで宣言したposotion:absoluteの影響でiframe要素のy軸の値が0になっている?? console.log(iframePlayer.getIframe().offsetTop); if (window.pageYOffset < iframePlayer.getIframe().offsetTop && window.pageYOffset + window.screen.height > iframePlayer.getIframe().offsetTop + iframePlayer.getIframe().offsetHeight) { iframePlayer.playVideo(); } else { iframePlayer.pauseVideo(); } } }); </script> </body> </html>

試したこと

getBoundingClientRect()でiframe要素の座標を取得したりしましたが自動再生の関数は動きませんでした。
他にもdisplay:gridでiframe要素をレスポンシブで実装する方法も試し、目的の動作を実現できはしましたがie非対応のため諦めました。。

補足情報(FW/ツールのバージョンなど)

.containerと.embedに当たっているcssをコメントアウトすれば自動再生自体はできますが、
レスポンシブに対応しようとしている段階で詰まっている状況です。

参考サイト
https://coliss.com/articles/build-websites/operation/css/experiments-in-fixed-aspect-ratios.html

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

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

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

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

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

guest

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

まだ回答がついていません

会員登録して回答してみよう

アカウントをお持ちの方は

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

ただいまの回答率
85.35%

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

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

質問する

関連した質問