javascript - 将视频链接到 HTML anchor 标记

Question

我正在尝试制作一个具有“观看视频” anchor 链接的网站，我想做的是将视频链接到 anchor 标签，当有人点击链接时，视频出现在同一个网页，但在网页上和视频后面，页面应该变亮。帮我解决这个问题。

<div class="button">
  <a href="" class="btn btn-one">Watch Video</a>
  <a href="" class="btn btn-two">Explore More</a>
</div>

Answer 1

var $iframe = $('iframe'),
    $videoLink = $('.video-link'),
    playerTemplate = '<div class="player"><div class="player__video"><div class="video-filler"></div><button class="video-close">&times;</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>