CSSでボタンを押すとiframeでサイトを表示するようにしたいが表示されない

前提

ウェブサイトにカメラを表示して特定のマーカーにカメラをかざすと映像がでるARを作りました。

実現したいこと

labelタグでボタンを作って、ボタンを押すとiframeで指定したサイトを画面上に表示させたいのですが、
サイトが表示されません。
どこに問題がありますでしょうか？

該当のソースコード

<!doctype html>
<html>
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no, target-densityDpi=device-dpi" />
        <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
        <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>
        <script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-detector.js"></script>
        <script src="https://raw.githack.com/AR-js-org/studio-backend/master/src/modules/marker/tools/gesture-handler.js"></script>

        <style>
        body {
            margin : 0;
            overflow: hidden;
            font-family: 'Open Sans', sans-serif;
        }

/*ボタン装飾*/
label,input {
display: block;
position: fixed;
bottom: 0;
width:100%;
padding : 8px;
color: #fff;
font-weight: bold;
background: #999;
cursor: pointer;
background-size: cover;
z-index: 220;
text-align: center;
height:5vh;
}

.switch {
display: none;
}

.content {
display: none;
}

.switch:checked + .content {
display: block;
}
    </style>
    </head>

    <body style="margin: 0; overflow: hidden;">
    
        <a-scene
            vr-mode-ui="enabled: false"
            device-orientation-permission-ui="enabled: false"
            embedded
            gesture-detector
        >
    
            <a-assets>
                <video
                    id="vid"
                    src="assets/asset.mp4"
                    preload="auto"
                    response-type="arraybuffer"
                    loop
                    crossorigin
                    webkit-playsinline
                    muted
                    playsinline
                ></video>
                <audio src="videopath" autoplay></audio>
            </a-assets>

            <a-marker
                type="pattern"
                preset="custom"
                url="assets/marker.patt"
                videohandler
                smooth="true"
                smoothCount="10"
                smoothTolerance="0.01"
                smoothThreshold="5"
                raycaster="objects: .clickable"
                emitevents="true"
                cursor="fuse: false; rayOrigin: mouse;"
                id="markerA"
            >
                <a-video
                link="href:https://twitter.com/XXXXX"
         animation-mixer="loop:repeat"
                    src="#vid"
                    width="2.6" height="1.4" position="0 0 0" rotation="270 0 0" play="true"
                    class="clickable"
                    gesture-handler
                ></a-video>
            </a-marker>

            <a-entity camera></a-entity>
        </a-scene>
       
    <section id="box">
    <label for="label1">アクセスする</label>
    <input type="checkbox" id="label1" class="switch"/>
    <div class="content">
<iframe src="https://ja.wikipedia.org/wiki/%E3%83%A1%E3%82%A4%E3%83%B3%E3%83%9A%E3%83%BC%E3%82%B8"></iframe>
    </div>
</section>
    </body>
</html>

試したこと

display:hiddenやdisplay:blockをvisibilityで表示非表示をさせてみましたが、
表示されません。
カメラの上に表示させるのは難しいのでしょうか？

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

回答2件

自己解決

.switch:checked + .content {
z-index: 221;
display:block;
position: relative;
  padding-bottom: 56.25%;
  height: 0;
  overflow: hidden;
}

iframe {
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
  }

この方法で表示されました。

投稿2022/05/26 10:04

yashimamanta

総合スコア12