Question

我的网站上有一个页面，其中显示了一个iframe大视频，在其下方，我的其他YouTube视频的缩略图/标题/时间的3列。我希望如此，当用户点击缩略图时，主视频上方的标题会随着在同一iframe窗口中加载的新视频而变化。现在我觉得我说得对，但我知道这是一个安全问题，因此iframe不会加载新视频。我可以通过什么方式使这项工作安全有效？我收到错误通过X-Frame-Options

加载拒绝

<h2>Video Gallery</h2>
<p id = "description"></p>

<div class="embed-responsive embed-responsive-16by9 mbl">
    <iframe name ="mainframe" class="embed-responsive-item" src="//www.youtube.com/embed/ZuGHts631vM" allowfullscreen></iframe>
</div>


<article class="video">
    <figure>
        <a target="mainframe" data-video="https://www.youtube.com/"><img onclick="myFunction('How to ....')" class="videoThumb" src="../../images/thumbnails/thumb1.jpg"></a>
    </figure>
    <h3 class="videoTitle">How to ....</h3>
    <p class ="time">0:31</p>

</article>

<article class="video">
    <figure>
        <a target="mainframe" href="https://www.youtube.com/"><img onclick="myFunction('funny video')" class="videoThumb" src="../../images/thumbnails/thumb2.jpg"></a>
    </figure>
    <h3 class="videoTitle">Funny video</h3>
    <p class ="time">1:59</p>

</article>

<article class="video">
    <figure>
        <a target="mainframe" href="https://www.youtube.com/"><img onclick="myFunction('Crazy Jump')" class="videoThumb" src="../../images/thumbnails/thumb3.jpg"></a>
    </figure>
    <h3 class="videoTitle">Crazy Jump</h3>
    <p class ="time">1:29</p>

</article>


<script>
function myFunction(name)
{
    document.getElementById("description").innerHTML =  "" + name;

}
</script>

Answer 1

我没有使用youtube视频的嵌入式链接，我只是在顶部复制视频的网址：/固定

在尝试加载新的iframe网址和文本时修复X-Frame选项拒绝加载

1 个答案: