teratail
回答率
85.48%
質問するログイン新規登録
トップに関する質問【tubular.js】mobileサイズ時の切り替えについて

編集履歴

質問編集履歴

18

文章を修正しました。

2019/03/15 03:28

投稿

hisakiitou
hisakiitou

スコア16

test CHANGED
File without changes
test CHANGED
File without changes

17

文章を修正しました。

2019/03/15 03:28

投稿

hisakiitou
hisakiitou

スコア16

test CHANGED
File without changes
test CHANGED
File without changes

16

文章を修正しました。

2019/03/14 14:42

投稿

hisakiitou
hisakiitou

スコア16

test CHANGED
File without changes
test CHANGED
File without changes

15

文章を修正しました。

2019/03/14 11:25

投稿

hisakiitou
hisakiitou

スコア16

test CHANGED
File without changes
test CHANGED
File without changes

14

コードを改善しました。

2019/03/14 10:36

投稿

hisakiitou
hisakiitou

スコア16

test CHANGED
File without changes
test CHANGED
@@ -40,7 +40,9 @@
40
40
 
41
41
  $(document).ready(function(){
42
42
 
43
- $('#top_main').tubular();
43
+ $('#top_main').tubular(
44
+
45
+ document.getElementById("#top_main").style.display="none" );
44
46
 
45
47
  });
46
48
 

13

文章を修正しました。

2019/03/14 07:18

投稿

hisakiitou
hisakiitou

スコア16

test CHANGED
File without changes
test CHANGED
@@ -8,11 +8,19 @@
8
8
 
9
9
  調べたところ、メディアクエリは使えないようです。
10
10
 
11
- 皆様のお知恵を頂きたいです。
11
+ 皆様のお知恵をどうか頂きたいです。
12
12
 
13
13
 
14
14
 
15
- 下記が現在設置中のtubularのスクリプトです。どうぞよろしくお願いいたします。
15
+ 下記が現在設置中のtubularのスクリプトです。
16
+
17
+ 表記方法のミス等もあるかと思います。どんどん指摘いただければ嬉しいです。
18
+
19
+
20
+
21
+ 何卒よろしくお願いいたします。
22
+
23
+
16
24
 
17
25
  ```
18
26
 

12

コードを改善しました。

2019/03/14 07:13

投稿

hisakiitou
hisakiitou

スコア16

test CHANGED
File without changes
test CHANGED
@@ -18,52 +18,28 @@
18
18
 
19
19
  <script src="js/jquery.tubular.1.0.js"></script>
20
20
 
21
- <script type="text/javascript">
21
+ <script src="js/jquery.tubular.1.0.js"></script>
22
22
 
23
- var onYouTubeIframeAPIReady = function(){
23
+ <script>
24
24
 
25
- var player = new YT.Player("#top_main", {
25
+ $('document').ready(function() {
26
26
 
27
- videoId: "9DTsL05QkDA", // 再生する動画のYouTube ID
27
+ var options = { videoId: '9DTsL05QkDA'};
28
28
 
29
- width : '100%',　// プレイヤーの幅
29
+ $('#top_main').tubular(options);
30
30
 
31
- height: auto,　// プレイヤーの高さ
31
+ if(!navigator.userAgent.match(/(iPhone|iPad|iPod|Android)/)){
32
32
 
33
- // ↓イベント設定↓
33
+ $(document).ready(function(){
34
34
 
35
- events: {
35
+ $('#top_main').tubular();
36
36
 
37
- 'onStateChange': onPlayerStateChange // 状態が変更された時
37
+ });
38
38
 
39
- }
39
+ }
40
40
 
41
- 　　　　// ↑イベント設定↑
41
+ });
42
42
 
43
- });
43
+ </script>
44
44
 
45
- };
45
+ ```
46
-
47
- // 状態が変更された時
48
-
49
- function onPlayerStateChange(event) {
50
-
51
- // 現在のプレーヤーの状態を取得
52
-
53
- var status = event.data;
54
-
55
- // 再生終了時
56
-
57
- if (status == YT.PlayerState.ENDED) {
58
-
59
- // ↓任意の処理を記述↓
60
-
61
- 　　　　console.log("--再生終了しました。--");
62
-
63
- 　　　　// ↑任意の処理を記述↑
64
-
65
- };
66
-
67
- }
68
-
69
- </script> ```

11

文章を修正しました。

2019/03/14 05:40

投稿

hisakiitou
hisakiitou

スコア16

test CHANGED
File without changes
test CHANGED
@@ -2,11 +2,11 @@
2
2
 
3
3
  PCではうまくいったのですが タブレットとスマホの時はあらかじめ用意した写真に切り替える仕様にしたいのですが
4
4
 
5
- プログラムがわかりません。教えていただけないでしょうか？
5
+ プログラムがわかりません。
6
6
 
7
7
  （同様の質問が以前あったのですが、回答ゼロだったため）
8
8
 
9
- メディアクエリは使えないようです。
9
+ 調べたところ、メディアクエリは使えないようです。
10
10
 
11
11
  皆様のお知恵を頂きたいです。
12
12
 

10

文章を修正しました。

2019/03/14 05:04

投稿

hisakiitou
hisakiitou

スコア16

test CHANGED
File without changes
test CHANGED
File without changes

9

文章を修正しました。

2019/03/14 02:45

投稿

hisakiitou
hisakiitou

スコア16

test CHANGED
File without changes
test CHANGED
File without changes

8

誤字がありました。恐れ入りました。

2019/03/13 16:35

投稿

hisakiitou
hisakiitou

スコア16

test CHANGED
File without changes
test CHANGED
File without changes

7

文章を修正しました。

2019/03/13 12:38

投稿

hisakiitou
hisakiitou

スコア16

test CHANGED
File without changes
test CHANGED
File without changes

6

文章を修正しました。

2019/03/13 10:10

投稿

hisakiitou
hisakiitou

スコア16

test CHANGED
File without changes
test CHANGED
File without changes

5

文章を修正しました。

2019/03/13 07:24

投稿

hisakiitou
hisakiitou

スコア16

test CHANGED
File without changes
test CHANGED
@@ -1,8 +1,6 @@
1
- 現在制作中のページ背景に、jquery.tubular.1.0で動画を設定したいのですが、
1
+ 現在制作中のページ背景に、jquery.tubular.1.0で動画を設定したいと思っており、
2
2
 
3
- PCではうまくいったのですが タブレットとスマホの時はうまく作動しないので、
3
+ PCではうまくいったのですが タブレットとスマホの時はあらかじめ用意した写真に切り替える仕様にしたいのですが
4
-
5
- タブレットとスマホの時だけあらかじめ用意した写真にしたいのですが
6
4
 
7
5
  プログラムがわかりません。教えていただけないでしょうか？
8
6
 

4

誤字がありました。恐れ入りました。

2019/03/13 05:53

投稿

hisakiitou
hisakiitou

スコア16

test CHANGED
File without changes
test CHANGED
@@ -1,6 +1,6 @@
1
1
  現在制作中のページ背景に、jquery.tubular.1.0で動画を設定したいのですが、
2
2
 
3
- PCはうまくいったのですが タブレットとスマホの時はうまく作動しないので、
3
+ PCではうまくいったのですが タブレットとスマホの時はうまく作動しないので、
4
4
 
5
5
  タブレットとスマホの時だけあらかじめ用意した写真にしたいのですが
6
6
 

3

誤字がありました。恐れ入りました。

2019/03/13 05:51

投稿

hisakiitou
hisakiitou

スコア16

test CHANGED
File without changes
test CHANGED
@@ -1,4 +1,4 @@
1
- 現在制作中のページ背景に、jquery.tubular.1.0で動画にを設定したいのですが、
1
+ 現在制作中のページ背景に、jquery.tubular.1.0で動画を設定したいのですが、
2
2
 
3
3
  PCはうまくいったのですが タブレットとスマホの時はうまく作動しないので、
4
4
 

2

誤字がありました。恐れ入りました。

2019/03/13 00:58

投稿

hisakiitou
hisakiitou

スコア16

test CHANGED
File without changes
test CHANGED
File without changes

1

誤字がありました。恐れ入りました。

2019/03/13 00:32

投稿

hisakiitou
hisakiitou

スコア16

test CHANGED
File without changes
test CHANGED
File without changes