首页猿问在内容上方的窗口中播放优酷帧

在内容上方的窗口中播放优酷帧

JavaScript

aluckdog 2022-09-16 21:02:34

我的页面上有几个小视频。如果有人点击视频，它应该在页面中心播放更大尺寸的视频。我不知道要搜索什么或如何做到这一点！有人可以给我一个建议吗？谢谢！

查看完整描述

2 回答

斯蒂芬大帝

TA贡献1827条经验获得超8个赞

您可以使用 Youtube API 在有人点击缩略图时动态加载视频

<html>

<head>

<style>

.container {

display: flex;

flex-direction: column;

}

img {

width: 250px;

height: 250px;

}

</style>

</head>

<body>

<div class="container"><span>Thumbnail (click me)</span>

</div>

<span>Video</span>

</div>

// Load the Youtube IFrame Player API code asynchronously.

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/player_api";

var firstScriptTag = document.getElementsByTagName('script')[0];

firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

function enlarge(event) {

//Get the video ID from the thumbnail

var videoID = event.target.attributes["data-video"].value;

//Get the video container

var container = document.getElementById("videoContainer");

//Clear it as youtube overwrites the element

container.innerHTML = "";

//Create element which will be replaced with video

var videoFrame = document.createElement('div');

//append to the container

container.appendChild(videoFrame);

//create youtube video

videoFrame.id = 'videoFrame';

new YT.Player('videoFrame', {

height: '360',

width: '640',

videoId: videoID

});

}

//Get all thumbnails

var vids = document.getElementsByClassName("videoThumb");

//Add event listener to all thumbnails

for(var i = 0; i < vids.length; i++) {

vids[i].addEventListener("click",enlarge);

}

</script>

</html>

反对回复 2022-09-16

胡说叔叔

TA贡献1804条经验获得超8个赞

我会使用.Bootstrap使它非常容易实现（如果你以前从未使用过它）。modal

以下是有关如何使用它的示例（只需添加自己的样式），以下是文档：CSS

文档

<head>

</head>

<body>

Youtube video

</button>

<h5 class="modal-title" id="staticBackdropLabel">Modal title</h5>

</button>

</div>

</div>

</body>

反对回复 2022-09-16

2 回答
0 关注
70 浏览

关注

添加回答

0/150

提交

取消

热搜

最近搜索清空

在内容上方的窗口中播放优酷帧

在内容上方的窗口中播放优酷帧

2 回答

添加回答