動画の上のリンクがクリックできません

前提

HTML、CSSを使用してWEBサイトを作っています。
ファーストビューの背景に動画を使用しているのですが、その上に配置したリンクが
クリックできす悩んでおります。
↓こちらのサイトです
http://orian.html.xdomain.jp/index.html

実現したいこと

リンクをクリックしたときに、リンク先のsnsに飛ぶようにしたいです

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

タイトル下のリンクがクリックできません。

該当のソースコード

HTML
1<!DOCTYPE html>
2<html lang="ja">
3    <head>
4        <meta charset="utf-8">
5        <title>HINAportfolio</title>
6        <meta name="description" content="恩田陽菜のポートフォリオ">
7        <link rel="icon" type="image/png" href="images/favicon.ico">
8        <meta name="viewport" content="width=device-width, initial-scale=1">
9
10
11
12
13    <!-- CSS -->
14        <link rel="stylesheet" href="https://unpkg.com/ress/dist/ress.min.css">
15        <link href="https://fonts.googleapis.com/css?family=Philosopher" rel="stylesheet">
16        <link href="css/style.css" rel="stylesheet">
17    </head>
18
19    <body>
20        <div id="home" class="big-bg">
21            <header class="page-header wrapper">
22                <h1><a href="index.html"><img class="logo" src="images/logo.png" alt="ポートフォリオ ホーム"></a></h1>
23                <nav>
24                    <ul class="main-nav">
25                        <li><a href="works.html">Works</a></li>
26                        <li><a href="profile.html">Profile</a></li>
27                        <li><a href="contact.html">Contact</a></li>
28                    </ul>
29                </nav>
30
31            </header>
32<header>
33      <div class="header-text">
34        <p class="header-title">designer</p>
35        <h1 class="header-name">ONDA HINA</h1>
36        <p class="header-link">
37          <a href="https://twitter.com/orian333">twitter</a> /
38           <a href="https://www.instagram.com/onda_hina/">instagram</a> /
39          <a href="https://www.youtube.com/channel/UCE4WIOSKzbQWndk4An2oXeQ">youtube</a>
40        </p>
41      </div>
42          <video src="images/movie.mp4" autoplay loop muted>
43</header>
44           </div>
45
46        </div><!-- /#home -->
47    </body>
48</html>
49
50
51
52
53
54
55```CSS
56@charset "UTF-8";
57
58/* 共通部分
59------------------------------- */
60html {
61    font-size: 100%;
62}
63body{
64    font-family: "Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", "ヒラギノ角ゴ Pro W3", sans-serif;
65    line-height: 1.7;
66    color: #432;
67}
68a {
69    text-decoration: none;
70}
71img {
72    max-width: 100%;
73}
74.wrapper {
75    max-width: 1100px;
76    margin: 0 auto;
77    padding: 0 4%;
78}
79
80/* 大きな背景画像 */
81.big-bg {
82    background-size: cover;
83    background-position: center top;
84    background-repeat: no-repeat;
85}
86
87/* 見出し */
88.header-name {
89    font-size: 4rem;
90    font-family: 'Philosopher', serif;
91    text-transform: uppercase;
92    font-weight: normal;
93}
94.header-title{
95    font-size: 1.3rem;
96    font-family: 'Philosopher', serif;
97    text-transform: uppercase;
98    font-weight: normal;
99}
100.page-title{
101    font-size: 3rem;
102    font-family: 'Philosopher', serif;
103    text-transform: uppercase;
104    font-weight: normal;
105}
106.sub-title {
107    font-size: 1.375rem;
108    padding: 0 8px 8px;
109    border-bottom: 2px #0bd solid;
110    font-weight: normal;
111}
112
113/* ボタン */
114.button {
115    font-size: 1.3rem;
116    background: #c6ecec;
117    color: #fff;
118    border-radius: 5px;
119    padding: 18px 32px;
120}
121.button:hover {
122    background: #0090aa;
123}
124
125/* iframe */
126iframe {
127    width: 100%;
128}
129
130/* HEADER
131------------------------------- */
132.page-header {
133    display: flex;
134    justify-content: space-between;
135}
136.logo {
137    width: 210px;
138    margin-top: 14px;
139}
140.main-nav {
141    display: flex;
142    font-size: 1.25rem;
143    text-transform: uppercase;
144    margin-top: 34px;
145    list-style: none;
146}
147.main-nav li {
148    margin-left: 36px;
149}
150.main-nav a {
151    color: #432;
152}
153.main-nav a:hover {
154    color: #0bd;
155}
156
157* {
158  margin: 0;
159  padding: 0;
160}
161
162
163header{
164  position: relative;
165  margin-bottom: ,5rem;
166}
167
168.header-text {
169  position: absolute;
170  top: 0;
171  display: flex;
172  flex-direction: column;
173  justify-content: center;
174  align-items: center;
175  text-align: center;
176}
177header video {
178  object-fit: cover;
179  object-position: center top;
180  opacity: var(--video-opacity);
181}
182
183.header-text,
184header video {
185  width: 100vw;
186  height: 90vh;
187}
188
189
190
191/*INDEX
192------------------------------- */
193#index {
194    background-image: url(../images/main-bg.jpg);
195    min-height: 100vh;
196}
197#index .page-title {
198    text-transform: none;
199}
200.index-content {
201    text-align: center;
202    margin-top: 10%;
203}
204.index-content p {
205    font-size: 1.125rem;
206    margin: 10px 0 42px;
207}
208
209
210
211
212/* PLOFILE
213------------------------------- */
214#profile {
215    background-image: url(../images/news-bg.jpg);
216    height: 270px;
217    margin-bottom: 40px;
218}
219#profile .page-title {
220    text-align: center;
221}
222.profile-contents {
223    display: flex;
224    justify-content: space-between;
225    margin-bottom: 50px;
226}
227
228/* 記事部分 */
229article {
230    width: 60%;
231}
232/* サイドバー*/
233aside{
234  width: 36%
235}
236.news-contents{
237       display: flex;
238       justify-content: space-between;
239       margin-bottom: 50px;
240}
241.post-info {
242    position: relative;
243    padding-top: 4px;
244    margin-bottom: 40px;
245}
246.post-date {
247    background: #0bd;
248    border-radius: 50%;
249    color: #fff;
250    width: 100px;
251    height: 100px;
252    font-size: 1.625rem;
253    text-align: center;
254    position: absolute;
255    top: 0;
256    padding-top: 10px;
257}
258.post-date span {
259    font-size: 1rem;
260    border-top: 1px rgba(255,255,255,.5) solid;
261    padding-top: 6px;
262    display: block;
263    width: 60%;
264    margin: 0 auto;
265}
266.post-title {
267    font-family: "Yu Mincho", "YuMincho", serif;
268    font-size: 2rem;
269    font-weight: normal;
270}
271.post-title,
272.post-cat {
273    margin-left: 120px;
274}
275article img {
276    margin-bottom: 20px;
277}
278article p {
279    margin-bottom: 1rem;
280}
281
282/* サイドバー */
283.sub-title{font-size: 1.375rem;
284          padding: 08px 8px;
285          border-bottom: 2px #0bd solid;
286          font-weight: normal;
287        }
288aside p{
289  padding: 12px 10px
290}
291
292
293.profile-contents {
294    margin-bottom: 60px;
295    list-style: none;
296}
297.profile-contents li {
298    border-bottom: 1px #ddd solid;
299}
300.profile-contents a {
301    color: #432;
302    padding: 10px;
303    display: block;
304}
305.profile-contents a:hover {
306    color: #0bd;
307}
308
309
310
311
312
313
314/* WORKS
315------------------------------- */
316#works {
317    background-image: url(../images/menu-bg2.jpg);
318    min-height: 100vh;
319}
320.works-content {
321    max-width: 560px;
322    margin-top: 10%;
323}
324.works-content .page-title {
325    text-align: center;
326}
327.works-content p {
328    font-size: 1.125rem;
329    margin: 10px 0 0;
330}
331
332.grid {
333  display: grid;
334  gap: 26px;
335  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
336  margin-top: 6%;
337  margin-bottom: 50px;
338}
339
340.subtitle{
341  text-align:center;
342}
343/* WORKS1編集中
344------------------------------- */
345
346.sakuhinmei{
347    text-transform: none;
348   text-align:center;
349}
350.setumei{
351    text-transform: none;
352   text-align:center;
353   padding-bottom: 15px;
354}
355.sakuhin{
356  padding-bottom: 15px;
357}
358
359.item{
360  transition: .3s;
361}
362.item:hover{
363  filter:grayscale(0);
364  transform: scale(1.1);
365
366}
367/*=== 9-1-4 矢印が動いてスクロールを促す  ====*/
368
369/*スクロールダウン全体の場所*/
370.scrolldown4{
371    /*描画位置※位置は適宜調整してください*/
372	position:absolute;
373	bottom:1%;
374	right:50%;
375    /*矢印の動き1秒かけて永遠にループ*/
376	animation: arrowmove 1s ease-in-out infinite;
377}
378
379/*下からの距離が変化して全体が下→上→下に動く*/
380@keyframes arrowmove{
381      0%{bottom:1%;}
382      50%{bottom:3%;}
383     100%{bottom:1%;}
384 }
385
386/*Scrollテキストの描写*/
387.scrolldown4 span{
388    /*描画位置*/
389	position: absolute;
390	left:-20px;
391	bottom:10px;
392    /*テキストの形状*/
393	color: #0090aa;
394	font-size: 0.7rem;
395	letter-spacing: 0.05em;
396	/*縦書き設定*/
397	-ms-writing-mode: tb-rl;
398    -webkit-writing-mode: vertical-rl;
399    writing-mode: vertical-rl;
400}
401
402/* 矢印の描写 */
403.scrolldown4:before {
404    content: "";
405    /*描画位置*/
406    position: absolute;
407    bottom: 0;
408    right: -6px;
409    /*矢印の形状*/
410    width: 1px;
411    height: 20px;
412    background: #0090aa;
413    transform: skewX(-31deg);
414}
415
416.scrolldown4:after{
417	content:"";
418    /*描画位置*/
419	position: absolute;
420	bottom:0;
421	right:0;
422    /*矢印の形状*/
423	width:1px;
424	height: 50px;
425	background:#0090aa;
426}
427
428/* CONTACT
429------------------------------- */
430#contact {
431    background-image: url(../images/contact-bg.jpg);
432    min-height: 100vh;
433}
434
435/* フォーム */
436form div {
437    margin-bottom: 14px;
438}
439label {
440    font-size: 1.125rem;
441    margin-bottom: 10px;
442    display: block;
443}
444input[type="text"],
445input[type="email"],
446textarea {
447    background: rgba(255,255,255,.5);
448    border: 1px #fff solid;
449    border-radius: 5px;
450    padding: 10px;
451    font-size: 1rem;
452}
453input[type="text"],
454input[type="email"] {
455    width: 100%;
456    max-width: 240px;
457}
458textarea {
459    width: 100%;
460    max-width: 480px;
461    height: 6rem;
462}
463input[type="submit"] {
464    border: none;
465    cursor: pointer;
466    line-height: 1;
467}
468
469/* 店舗情報・地図 */
470#location {
471    padding: 4% 0;
472}
473#location .wrapper {
474    display: flex;
475    justify-content: space-between;
476}
477.location-info {
478    width: 22%;
479}
480.location-info p {
481    padding: 12px 10px;
482}
483.location-map {
484    width: 74%;
485}
486
487/* SNS */
488#sns {
489    background: #FAF7F0;
490    padding: 4% 0;
491}
492#sns .wrapper {
493    display: flex;
494    justify-content: space-between;
495}
496#sns .sub-title {
497    margin-bottom: 30px;
498}
499.sns-box {
500    width: 30%;
501}
502
503/* フッター
504------------------------------- */
505footer {
506    background: #c6ecec;
507    text-align: center;
508    padding: 26px 0;
509}
510footer p {
511    color: #fff;
512    font-size: 0.875rem;
513}
514footer ul{
515  display: flex;
516  justify-content: center;
517  margin-bottom: 2rem;
518  list-style-type: none;
519}
520footer li{
521  margin: 0 12px;
522}
523footer a{
524  color: #0090aa;
525}
526footer a:hover {
527  color: #fff;
528}
529

試したこと

<header></header>の外にリンクを配置したときはリンク元に飛ぶことができました。動画の上にリンクが配置されたときにリンクに飛べなくなってしまいます。

よろしくお願いいたします。。。

m.ts10806

2022/10/09 06:43

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

orian

2022/10/09 11:20

ご教授いただきありがとうございます！参考にし、修正させて頂きました。

m.ts10806

2022/10/09 20:14 編集

CSSこれで全てですか？カスタムプロパティ--video-opacityの定義はどうなっているのでしょう。なんとなくですが、重なり順という風には思いますが、提示コードだけでは手元で再現できないので（リンククリックできる）、やはり再現できる程度には提示いただきたいです。ＨＴＭＬも可能な限り全て

orian

2022/10/11 04:52

ご返信いただきまして、ありがとうございます！コード不足で再現できないとのこと、失礼いたしました。更新いたしました。該当ページのCSSとHTMLはこちらで全てになります。また、何か不足があればご教授いただけると幸いです。よろしくお願いいたします。

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

回答1件

ベストアンサー

リンクよりも video の方が手前に来ているのが原因です。
以下の方法をお試しください。

案１： video と div.header-text の位置を入れ替える

html
1<!-- 手前にリンク、奥にvideoを配置 -->
2<video src="images/movie.mp4" autoplay loop muted>
3<div class="header-text">...</div>

案２： video の css に pointer-events: none を指定する

diff
1  header video {
2    object-fit: cover;
3    object-position: center top;
4    opacity: var(--video-opacity);
5+   pointer-events: none;
6  }

pointer-events | MDN

値を none に設定すると、要素がポインターイベントのターゲットではないことを示すのに加え、ポインターイベントが要素を「通過」して、代わりに要素の「下」をターゲットにすることを指示します。

投稿2022/10/11 05:18

編集2022/10/11 23:52

shinoharat

総合スコア1676

orian

2022/10/11 06:40

shinoharat　様ご回答いただきありがとうございます。案2の通り修正したところ、リンクに飛ぶことができました！大変助かりました。案１も試したのですが、リンクが背景の後ろに隠れてしまいました。案２の方法でサイトを更新させて頂きます。ありがとうございました！

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

あなたの回答

tips

プレビュー

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

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

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

ただいまの回答率
85.48%

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

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

質問する

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

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