Question

您好我希望当用户点击我网页上的特定链接时，会弹出一个youtube视频。我已经尝试并试图解决这个问题，但真的很挣扎。我确信这可以通过JQuery实现，但我不确定。

HTML

<div class="audiodemo">
<div class="audiodemoheader"> “Welcome to the Recovery Show, who's on   board?”</div>
<div class="audiodemolink"><a href="http://www.youtube.com/watch?v=kh29_SERH0Y?  rel=0" rel="prettyPhoto" class="demolink">Listen</a></div>

CSS

.audiodemo {
width: 100%;
height: 300px;
float: left;
background-image: url(../images/hero.jpg);
}

.audiodemoheader {
width:100%;
height:auto;
text-align:center;
float:left;
margin-top:94.5px;
font: 200 18px/1.3 'Roboto', 'Helvetica Neue', 'Segoe UI Light', sans-serif;
font-size: 30px;
font-weight: 200;
color: #FFF;

}

.audiodemolink {
width:100%;
height:auto;
text-align:center;
float:left;
margin-top:40px;


}


.audiodemolink .demolink {
display: inline-block;
font-weight: 700;
text-transform: uppercase;
padding: 11px 51px;
border: 3px solid #fff;
-webkit-transition: .2s;
transition: .2s;
color:#FFF;
text-decoration:none;
margin-left:auto;
margin-right:auto;
}

.audiodemolink .demolink:hover {
opacity: 0.7;
}

提前致谢

Answer 1

您可以使用Magnific Popup来实现此目的。首先要包括必要的文件。我从文档页面得到了这个：http://dimsemenov.com/plugins/magnific-popup/documentation.html

<!-- Magnific Popup core CSS file -->
<link rel="stylesheet" href="magnific-popup/magnific-popup.css"> 

<!-- jQuery 1.7.2+ -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 

<!-- Magnific Popup core JS file -->
<script src="magnific-popup/jquery.magnific-popup.js"></script>

一旦你有了这些，你需要编写一个jQuery函数来调用插件。我从他们的一个示例中获得了以下函数，但您可以使用适合您想要完成的选项来更新它。

$(document).ready(function() {
    $('.popup-youtube').magnificPopup({
        disableOn: 700,
        type: 'iframe',
        mainClass: 'mfp-fade',
        removalDelay: 160,
        preloader: false,
        fixedContentPos: false
    });
});

你需要做的最后一件事是在你的HTML中调用它。

<a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Open YouTube video</a>

您可以根据需要设置样式。如果您想看到更多示例，可以查看documentation，因为它可以非常清楚地解释所有内容。

Answer 2

使用bootstrap：

Demo

HTML 的

<div class="audiodemo">
    <div class="audiodemoheader">“Welcome to the Recovery Show, who's on board?”</div>
    <div class="audiodemolink">
        <a href="http://www.youtube.com/watch?v=kh29_SERH0Y" rel="prettyPhoto" class="demolink">Listen</a>
    </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">Modal title</h4>
            </div>
            <div class="modal-body">
            ...
            </div>
       </div>
   </div>
</div>

JS

jQuery('.demolink').on('click', function(evt){
    evt.preventDefault();
    var youtubeLink = $(this).attr('href').replace('watch?v=','embed/');
    var html = '<iframe width="620" height="320" src="'+ youtubeLink +'?rel=0&showinfo=0" frameborder="0" allowfullscreen></iframe>';
    $('.modal-body').html(html);
    $('#myModal').modal().on('hide.bs.modal', function(){
        $('.modal-body').html('');    
    })             
});

和bootstrap文件：

http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js

点击链接播放iframe视频

2 个答案: