个人中心
文章发布
退出
作者热门文章
- html - 出于某种原因，IE8 对我的 Sass 文件中继承的 html5 CSS 不友好？
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景？
25
4
我不得不重新发布，因为没有人给我我想要的答案。
我试图在用户点击该视频下方的按钮时，它会在弹出窗口中显示该视频。但是，它只会在每次单击按钮时显示相同的视频。
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>slider demo</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="js-image-slider.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
</head>
<body >
<style>
#myDIV {
display: none;
}
.display {
display: block;
}
.span2:focus ~ .alert {
display: none;
}
.span3:focus ~ .myDIV {
display: block;
padding: 20px;
background-color: #f44336;
color: white;
}/*
.alert{display:none;}
*/
.alert {
display:none;
}
.showdiv{
display: block;
padding: 20px;
background-color: #f44336;
color: white;
}
#video ~ #myDIV{
z-index: 1;
}
</style>
</head>
<body>
<div class="col-md-12 display"></div>
<p>Click the "Try it" button to toggle between hiding and showing the DIV element:</p>
<p id ="mydiv"onclick="myFunction()">Try it</p>
<div id="myDIV "><div class="display">
This is my DIV element.
</div>
</div>
<p><b>Note:</b> The element will not take up any space when the display property set to "none".</p>
<div id = "results"></div>
<script>
function myFunction() {
var x = document.getElementById('myDIV');
if (x.style.display === 'none') {
x.style.display = 'block';
x.style.color = 'blue';
x.style.position = 'absolute';
x.style.top = '20px';
x.style.left = '100px';
x.style.background = 'red';
} else {
x.style.display = 'none';
}
}
</script>
<script type="text/javascript">
$(document.ready(function(){
$('#select').click(function(){
$('#myDIV').append('<p>Hello world</p>');
});
});)
</script>
<script>
var channelName='ajaxkm';
$(document).ready(function()
{
$.get("https://www.googleapis.com/youtube/v3/channels",
{
part: 'contentDetails',
forUsername: channelName,
key: ''},
function(data)
{
$.each(data.items,function(i,item)
{
console.log(item);
pid=item.contentDetails.relatedPlaylists.uploads;
getVids(pid);
})
}
);
function getVids(pid){
$.get("https://www.googleapis.com/youtube/v3/playlistItems",
{
part: 'snippet',
maxResults: 10,
playlistId: pid,
key: ''},
function(data)
{
var output;
$.each(data.items,function(i,item)
{
console.log(item);
videTitle=item.snippet.title;
videoId = item.snippet.resourceId.videoId;
videoDescription = item.snippet.description;
output2='<div class="col-md-4 display"><iframe src=\"//www.youtube.com/embed/'+videoId+'\"></iframe><br><p id="show">'+videoDescription+'</p><span id ="span3" tabindex ="0"><p id ="select" onclick="myFunction()" > Discription of Video</p></span><p id="myDIV"><iframe id ="video" src =\"//www.youtube.com/embed/'+videoId+'\" ></iframe>'+videoDescription+ '</p></div>';
// output='<div class="col-md-4"><iframe id="youtube" src=\"//www.youtube.com/embed/'+videoId+'\"></iframe><p onclick="myFunction()"><span tabindex ="0"> Try it</span></p></div>';
// v = '<iframe class ="display" src=\"//www.youtube.com/embed/'+videoId+'\"></iframe>';
textout= videoDescription;
//append to results listStyleType
$('#results').append(output2);
// $('#myDIV').append(v);
$('#text').append(textout);
})
}
);
}
});
</script>
</body>
</html>
jquery html css iframe youtube
最佳答案
您是否尝试过渲染按钮，以便在单击时更新视频链接？看起来链接没有在点击时更新，这就是为什么您只看到相同的视频。
有点像...
var button = $("<button></button>")
.text("Add to Watchlist")
.click(function() {
getVids(pid)
render();
})
进入 render() 的是生成对 youtube 的请求的代码。 (即.get)
然后要添加按钮，我会将其附加到 div，与 div 行所在的位置相同。
$('#myDIV').append(button)
关于jquery - 如何让我的 div 显示选定的 youtube api 内容？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/39682417/
25
4
0
是否有任何解决方案来禁用右键单击选项并从 Youtube 视频中删除右下角水印 Logo ？我在搜索 GOOGLE 后尝试过。谁能告诉我？ 谢谢你。 最佳答案 试试 modestbranding范围:
我想使用 YouTube API (v3) 来启用仅音乐轨道的搜索(没有猫或藤蔓或任何其他非音乐视频)。我查看了 API Explorer 和文档以获取有关该问题的任何指示，但找不到任何有用的信息。
我需要为网站使用YouTube视频缩略图的maxresdefault版本，但是在开发实现此目的的代码后，我发现并非所有视频都具有这些缩略图，尽管这些视频均为1080p。 有没有一种方法可以自动为我的所
我想通过“iframe”嵌入youtube视频，但YouTube在我国禁止使用，建议我如何在我的网站上嵌入视频! [1]:以下图片显示了在我的国家/地区无法访问youtube 最佳答案 该视频将被嵌入
我正在为myBB使用一个名为Profile Music Plugin的插件，可以在此处找到http://community.mybb.com/mods.php?action=view&pid=75 我
Youtube IFRAME API中是否有可以执行命令的功能，例如在播放的视频结尾处打开网站？ (我相信有一个功能可以在旧的Java API下执行此操作，但该功能已于去年弃用。) 最佳答案 您可以引
我试图在Videos.insert和Videos.update查询中设置3d尺寸标志。但是标志不会改变。 更新查询示例: 请求: PUT https://www.googleapis.com/yout
使用此获取评论 评论主题:列表 GET https://www.googleapis.com/youtube/v3/commentThreads?part=snippet { "error": {
最近，我尝试使用OEmbed服务通过播放列表查询参数获取视频网址的iframe代码，但是OEmbed为我们提供了与我要求的视频不同的iframe代码。 这是带有播放列表查询参数的视频网址: https
我正在使用此代码: https://www.googleapis.com/youtube/v3/search?q=global+warming&part=id&maxResults=50&key=MY
我有一个LiveBroadcast，并且将来会添加一个scheduledStartTime。据我所知，这次测试不会对LiveBroadcast的整体状态产生影响，即广播是否具有准备就绪/测试的life
YouTube API是否支持在特定时间后关闭浏览器的参数？ 这需要使用链接在不同位置共享来推广促销视频。视频播放结束后关闭浏览器。 最佳答案 您可以使用Youtube API监控视频是否播放完毕，然
如果没有表单上的透明面板，YouTube Player将可以正常播放视频，或者可以全屏播放视频，透明面板中有一些图像没有什么特别的。如果我取出透明面板，则YouTube播放器会按需工作，并嵌入到应用程
我正在通过Google进行身份验证，以尝试获取YouTube分析数据，但我的问题是我不知道在查询YouTube时如何向您填充参数 在这里，我正在提供一项新服务:然后尝试查询它 我不确定要在“ids”参
我想添加youtube视频列表，但不添加视频播放器。所以我需要的是 视频标题 视频缩略图 视频时长 我以某种方式设法通过使用此http://img.youtube.com/vi/4wew2uWoARw
我正在使用youtube api和python库gdata 我遵循了文档，但似乎没有出路。 问题是 - How do i get the size of the youtube video fil
使用Youtube API，我如何获得评论或顶过youtube视频的用户ID /处理列表？ 提前致谢 最佳答案 在这里，您可以了解如何使用YouTube API v2(v3尚不支持此注释)获取评论:h
我正在为所有相关数据构建一个仪表板(以php为单位)，我还想在YouTube“稍后观看”播放列表中显示我的商品数量。 我知道无法使用YouTube API来解决这个问题，但是也许有人想出一种解决方法？
我尝试使用YouTube API，但存在引号问题。 SearchResource.ListRequest searchListRequest = yt.Search.List("sni
我想为我的Android应用程序的用户构建视频推荐器。我有Google OAuth可以登录我的应用程序。我可以获取有关我的应用程序用户在YouTube上观看的视频的数据吗？ 最佳答案 v3 API分为
我是一名优秀的程序员,十分优秀！