html embeding-的YouTube，videos.html
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html embeding-的YouTube，videos.html相关的知识，希望对你有一定的参考价值。
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>YouTube</title>
<style>
.video-list{
list-style:none;
}
.video-item{
display: inline-block;
vertical-align: top;
margin-bottom: 10px;
boxs-izing: border-box;
width:300px;
}
.video{
display:block;
/* html が見難くなるので css で指定しておく
width だけ指定すると なぜか 300x150 になった */
width:300px;
height:169px;
}
</style>
</head>
<body>
see also
<ul>
<li><a href="https://developers.google.com/youtube/player_parameters">YouTube IFrame Player API</a></li>
<li><a href="https://developer.mozilla.org/docs/Web/HTML/Element/iframe#Attributes">iframe attributes</a></li>
</ul>
playing
<ul class="video-list">
<li class="video-item">
<iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?rel=0&autoplay=1"></iframe>
autoplay=1
</li>
<li class="video-item">
<iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?rel=0&autoplay=1&loop=1&playlist=Na3ag7jkcR0"></iframe>
autoplay=1, loop=1, playlist=...<br />
loop forever
</li>
<li class="video-item">
<iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?rel=0"></iframe>
rel=0
without suggesting relative videos at the end of the video
</li>
</ul>
<!-- list
<ul class="video-list">
<li class="video-item">
<iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?loop=1"></iframe>
loop=1
</li>
</ul>
-->
widgets & controls
<ul class="video-list">
<li class="video-item">
<iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?controls=0"></iframe>
controls=0
</li>
<li class="video-item">
<iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?showinfo=0"></iframe>
showinfo=0
</li>
<li class="video-item">
<iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?modestbranding=1"></iframe>
modestbranding=1<br />
Don't show YouTube logo.
</li>
<li class="video-item">
<iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?disablekb=1"></iframe>
disablekb=1<br />
disable keyboard
<ul>
<li>space: play/pause</li>
<li>←,→: backward,forward</li>
<li>↑,↓: volume</li>
</ul>
</li>
</ul>
language
<ul class="video-list">
<li class="video-item">
<iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?cc_lang_pref=en&cc_load_policy=1"></iframe>
closed caption
</li>
<li class="video-item">
<iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?hl=fr"></iframe>
hl=fr
</li>
</ul>
time
<ul class="video-list">
<li class="video-item">
<iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?start=20"></iframe>
starts from 0:20s
</li>
<li class="video-item">
<iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?end=5"></iframe>
ends at 0:5s
</li>
</ul>
appearance
<ul class="video-list">
<li class="video-item">
<iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?theme=dark&color=red"></iframe>
theme=dark, color=red(default)
</li>
<li class="video-item">
<iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?theme=dark&color=white"></iframe>
theme=dark, color=white
</li>
<li class="video-item">
<iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?theme=light&color=red"></iframe>
theme=light, color=red
</li>
<li class="video-item">
<iframe class="video" src="https://www.youtube.com/embed/Na3ag7jkcR0?theme=light&color=white"></iframe>
theme=light, color=red
</li>
</ul>
</body>
</html>
以上是关于html embeding-的YouTube，videos.html的主要内容，如果未能解决你的问题，请参考以下文章
SysRec2016 | Deep Neural Networks for YouTube Recommendations
盘点! 深度学习推荐系统中各类流行的Embedding方法 (下)