JavaScript iframeの停止

###前提・実現したいこと
前提：画像をクリックすると埋め込まれた動画に切り替わるサイトを作成しました。

実現したいこと：
動画を再生中に他の画像をクリックすると、iframeで埋め込まれた動画を停止して画像にもどすこと。

###試したこと
iframeをdisplay:noneにしてJavaScriptによって非表示にすることはできましたが、画像の後ろで動画が再生されたままになってしまいます。

皆様にはクリックにて画像⇄動画を切り替えると同時に再生中の動画を停止する方法をお教えいただけたらと存じます。

###該当のソースコード

html
1<!DOCTYPE html>
2<html lang="ja">
3
4<head>
5    <meta charset="UTF-8">
6    <title>動画の停止</title>
7    <style>
8        .item {
9            width: 25%;
10            float: left;
11            padding-bottom: 5%;
12        }
13
14        .item-box {
15            height: 200px;
16            width: 200px;
17            margin: auto;
18            background-color: #11D8B3;
19            border-radius: 5px;
20        }
21
22        #movie1,
23        #movie2{
24            display: none;
25        }
26
27        .articles > div {
28            display: none;
29            font-size: 40px;
30            margin: auto;
31            float: left;
32        }
33    </style>
34</head>
35
36<body>
37   <!--画像と動画-->
38<div class="item">
39    <div class="item-box">
40        <div id="img1"><img src="img.jpeg" alt="img dog" width="200" height="200" alt=""></div>
41        <iframe id="movie1" width="200" height="200" src="https://www.youtube.com/embed/j5PLngd2WN0" allowfullscreen></iframe>
42    </div>
43</div>
44
45<div class="item">
46    <div class="item-box">
47        <div id="img2"><img src="img.jpeg" alt="img cat" width="200" height="200" alt=""></div>
48        <iframe id="movie2" width="200" height="200" src="https://www.youtube.com/embed/obTj1qvotdc" allowfullscreen></iframe>
49    </div>
50</div>
51
52<div class="articles">
53    <!--ここから詳細文-->
54    <div id="article1">The term "domestic dog" is generally used for both domesticated and feral varieties. The English word dog comes from Middle English dogge, from Old English docga, a "powerful dog breed".
55    </div>
56    <div id="article2">ネコ（猫）は、狭義にはネコ目（食肉目）- ネコ亜目- ネコ科- ネコ亜科- ネコ属- ヤマネコ種- イエネコ亜種に分類される小型哺乳類であるイエネコ（家猫、学名：Felis silvestris catus）の通称である。
57    </div>
58</div>
59
60
61    <script type="text/javascript">
62        //詳細の表示
63        function show(num) {
64  return function(){
65    document.getElementsByClassName
66    document.getElementById("article" + num).style.display = "block";
67    return false;
68  };
69}
70        //詳細詳細の非表示
71function hide(num) {
72  return function(){
73    document.getElementById("article" + num).style.display = "none";
74    return false;
75  };
76}
77//画像と動画の切替 
78function change(num) {
79return function(){
80var itemboxes = document.getElementsByClassName('item-box');
81for(var i = 0; i < itemboxes.length; i++){
82itemboxes[i].getElementsByTagName('div')[0].style.display = "block";
83}
84    var x = document.getElementsByTagName("iframe");
85for(var i = 0; i < x.length; ++i){
86x[i].style.display = "none";
87} 
88document.getElementById("img" + num).style.display = "none";
89document.getElementById("movie" + num).style.display = "block";
90return false;
91};
92};
93//イベントハンドラをまとめる関数
94window.onload=function(){
95  var itemboxes = document.getElementsByClassName('item-box');
96  for(var i = 0; i < itemboxes.length; i++){
97    var num = i + 1;
98    var node;
99    // div
100    node = itemboxes[i].getElementsByTagName('div')[0];
101    node.onclick=change(num);
102    // img
103    node = itemboxes[i].getElementsByTagName('img')[0];
104    node.onmouseover=show(num);
105    node.onmouseout=hide(num);
106    // iframe
107    node = itemboxes[i].getElementsByTagName('iframe')[0];
108    node.onmouseover=show(num);
109    node.onmouseout=hide(num);
110  }
111};
112    </script>
113</body>
114
115</html>

行動規範の内容に同意します

回答2件

ベストアンサー

目的の <iframe> を削除してから作り直す、という処理でうまく動くと思います。

###<iframe>の削除と再作成

JavaScript
1// iframe を削除
2var e = document.getElementById('movie1');
3var parent = e.parentElement;
4parent.removeChild(e);
5// iframe を再作成
6e = document.createElement('iframe');
7e.id = "movie1";
8e.width = "200px";
9e.height = "200px";
10e.src = "https://www.youtube.com/embed/j5PLngd2WN0";
11parent.appendChild(e);

投稿2016/05/25 01:40

編集2016/05/25 12:18

tkanda

総合スコア2425

may88seiji

2016/05/25 05:06

コメント有難うございます。 <iframe> を削除してから作り直す（画像⇔動画の切替との連携）は具体的にどのようなコードになりますでしょうか？試しに下記コードを記述しましたがうまくいっておりません。お教えいただければ幸いです。 var x = document.getElementsByTagName("iframe"); for(var i = 0; i < x.length; ++i){ x[i].style.display = "none"; document.body.removeChild(x); document.body.createElement('iframe') }

tkanda

2016/05/25 12:19

may88seiji

2016/05/25 14:45

ありがとうございます。無事に動画を止めて切り替えることができました。関数の汎用化、難しそうですがとりあえずトライしてみます！

行動規範の内容に同意します

src プロパティに null を代入すれば iframe 要素のリンク先を削除することが可能と思われます。

javascript
1document.getElementById('movie1').src = null;

「YouTube JavaScript Player API」を使えば、さらに融通の利いた機能を実装できそうです。

YouTube JavaScript Player API Reference | YouTube IFrame Player API | Google Developers

Re: may88seiji さん

投稿2016/05/24 09:52

think49

総合スコア18164

may88seiji

2016/05/24 13:31

回答ありがとうございます。nullを設定した場合、停止ではなく「指定したファイルまたはディレクトリは見つかりませんでした」という結果になるようです。。。一度、YouTube JavaScript Player APIについて調べてみます。

think49

2016/05/24 13:57 編集

クロスドメインなURIをiframe要素で埋め込んでいる為、動画再生自体を直接止めることはできません。間接的に止める方法として null 代入を提案しました。正規の手順で動画再生を停止するには YouTube JavaScript Player API しかないと思います。

may88seiji

2016/05/24 14:03

ありがとうございます。画像で切り替わった時点でnullを代入し、再度動画に切り替えた時にsrcを代入しなおすことができれば、nullでも停止はできそうですね。

行動規範の内容に同意します

あなたの回答

tips

プレビュー

行動規範の内容に同意します

質問の解決につながる回答をしましょう。サンプルコードなど、より具体的な説明があると質問者の理解の助けになります。また、読む側のことを考えた、分かりやすい文章を心がけましょう。

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

ただいまの回答率
85.48%

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

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

質問する

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

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

JavaScript iframeの停止

関連した質問