我正在尝试创建一个网站,其中包含指向视频的锚点链接,我想要做的是将视频链接到锚标记,当有人点击链接时,视频显示在同一网页上,但在网页上和视频后面,应该减轻页面。帮我解决这个问题。
<div class="button">
<a href="" class="btn btn-one">Watch Video</a>
<a href="" class="btn btn-two">Explore More</a>
</div>
&#13;
答案 0 :(得分:1)
var $iframe = $('iframe'),
$videoLink = $('.video-link'),
playerTemplate = '<div class="player"><div class="player__video"><div class="video-filler"></div><button class="video-close">×</button><iframe class="video-iframe" src="{{iframevideo}}" frameborder="0" allowfullscreen></iframe></div><div/>';
$videoLink.on('click', function(e) {
var localTemplate = '',
videoWidth = parseInt($(this).data('width')),
videoHeight = parseInt($(this).data('height')),
videoAspect = ( videoHeight / videoWidth ) * 100,
// elements
$player = null,
$video = null,
$close = null,
$iframe = null;
e.preventDefault();
localTemplate = playerTemplate.replace('{{iframevideo}}', $(this).prop('href'));
$player = $(localTemplate);
$player
.find('.video-filler')
.css('padding-top', videoAspect + '%');
$close = $player
.find('.video-close')
.on('click', function() {
$(this).off().closest('.player').hide().remove();
});
$player.appendTo('body').addClass('js--show-video');
});
.video-link {
display: inline-block;
padding: 5px 10px;
border-radius: 4px;
text-decoration: none;
color: white;
background-color: #f03;
box-shadow: 0 5px 10px -3px rgba(0,0,0,.5);
}
/* --- */
.player {
position: fixed;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0,0,0,1);
background: -webkit-radial-gradient(center, ellipse cover, rgba(0,0,0,.65) 0%, rgba(0,0,0,1) 100%);
background: -moz-radial-gradient(center, ellipse cover, rgba(0,0,0,.65) 0%, rgba(0,0,0,1) 100%);
background: -ms-radial-gradient(center, ellipse cover, rgba(0,0,0,.65) 0%, rgba(0,0,0,1) 100%);
background: radial-gradient(center, ellipse cover, rgba(0,0,0,.65) 0%,rgba(0,0,0,1) 100%);
opacity: 0;
-webkit-transition: opacity 0.3s ease-in-out;
transition: opacity 0.3s ease-in-out;
}
.player__video {
position: relative;
top: 50%;
left: 50%;
width: auto;
max-width: 75%;
background-color: #fff;
box-shadow: 0 0 50px rgba(0,0,0,.95);
-webkit-transform: translate(-50%,-50%);
transform: translate(-50%,-50%);
}
.js--show-video { opacity: 1; }
.video-filler {
display: block;
width: 100%;
}
.video-close {
position: absolute;
z-index: 0;
top: 0;
right: -30px;
padding: 5px 10px;
border: none;
outline: none;
border-radius: 0 50% 50% 0;
cursor: pointer;
font-size: 24px;
color: #000;
background-color: #fff;
box-shadow: 0 0 20px rgba(0,0,0,.75);
}
.video-iframe {
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: 10px solid #fff;
}
<a class="video-link" href="https://www.youtube.com/embed/ONaPq2L-MRg?html5=1" data-width="1920" data-height="1080">Open video</a>
答案 1 :(得分:1)
您确实需要视频代码并使用一些JavaScript。
不确定你的意思,但这里是我认为你的意思的简单实现。
<a href="javascript:openVideo()"
https://jsfiddle.net/awkbawgs/2/