【问题标题】:Embed Youtube in HTML5 Template在 HTML5 模板中嵌入 Youtube
【发布时间】:2019-01-21 21:29:00
【问题描述】:

这里有关于将 YT 视频嵌入博客页面的 HTML5/CSS3 Bootstrap 3.35 响应式模板问题。

我正在尝试将 iframe sn-p 放置在适当的位置以实现适当的功能。这是 HTML 代码。

单击/激活视频后,我收到一个错误页面,显示“找不到文件”。

 <!-- blog side -->
<section class="blog-side sp-seven blog-style-one standard-post video-post">
    <div class="container">
        <div class="row">
            <div class="col-md-9 col-sm-12 col-xs-12 content-side">
                <div class="blog-details-content">
                    <div class="video-gallery">
                        <img src="images/news/video.jpg" alt="Awesome Video Gallery">
                        <div class="overlay-gallery">
                            <div class="icon-holder">
                                <div class="icon">
                                    <a class="html5lightbox" title="Garden Video" href="<iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/NNcvbxIODsY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>"><i class="fa fa-play"></i></a> 
                                </div>
                            </div>    
                        </div>
                    </div>

我做错了什么?我不是编码员,但可以在足够的指导下找到自己的方式。

欢迎所有建议。

插件列表在这里

!--jquery js -->
<script type="text/javascript" src="js/jquery-2.1.4.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>
<script src="js/wow.js"></script>
<script src="js/validation.js"></script>
<script src="js/jquery.fancybox.pack.js"></script>
<script type="text/javascript" src="js/SmoothScroll.js"></script>

注意“fancybox.js”和“html5 lightbox.js”

【问题讨论】:

  • href 属性仅适用于 url 和哈希 ID。
  • 你只是在使用 Bootstrap 吗?没有引导程序 3.5,并且 3.4 没有灯箱。可以看看完整的代码吗?
  • Bootstrap 3.35 是 CSS./*! * Bootstrap v3.3.5 (getbootstrap.com) * 版权所有 2011-2015 Twitter, Inc. * 在 MIT (github.com/twbs/bootstrap/blob/master/LICENSE) 下获得许可 / /*/!!规范化.css v3.0.3 |麻省理工学院许可证 /*!| github.com/necolas/normalize.css /html {/!

标签: html youtube embed


【解决方案1】:

您的 HTML 格式不正确。您需要删除iframe 周围的a 标签。

<!-- blog side -->
<section class="blog-side sp-seven blog-style-one standard-post video-post">
    <div class="container">
        <div class="row">
            <div class="col-md-9 col-sm-12 col-xs-12 content-side">
                <div class="blog-details-content">
                    <div class="video-gallery">
                        <img src="images/news/video.jpg" alt="Awesome Video Gallery">
                        <div class="overlay-gallery">
                            <div class="icon-holder">
                                <div class="icon">
                                <iframe width="560" height="315" src="https://www.youtube-nocookie.com/embed/NNcvbxIODsY" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><i class="fa fa-play"></i> 
                            </div>
                        </div>    
                    </div>
                </div>

【讨论】:

猜你喜欢
  • 1970-01-01
  • 2015-06-03
  • 1970-01-01
  • 1970-01-01
  • 2013-02-03
  • 2011-04-24
  • 1970-01-01
  • 2017-03-05
  • 2013-10-19
相关资源
最近更新 更多