hashids.js – small JavaScript library to generate YouTube-like ids from numbers
const Hashids = require('hashids/cjs')
const hashids = new Hashids()
console.log(hashids.encode(1))Метка: youtube
paulirish/lite-youtube-embed – скрипт более быстрого внедрения youtube
Разработчик скрипта утверждает что он в 224 раза быстрее обычной вставки embed.
<lite-youtube videoid="ogfYd705cRs" style="background-image: url('https://i.ytimg.com/vi/ogfYd705cRs/hqdefault.jpg');">
<div class="lty-playbtn"></div>
</lite-youtube>Кнопки как на youtube
HTML
<button class="button" role="button">
Button #1
</button>CSS
.button {
border: 1px solid #DDD;
border-radius: 3px;
text-shadow: 0 1px 1px white;
-webkit-box-shadow: 0 1px 1px #fff;
-moz-box-shadow: 0 1px 1px #fff;
box-shadow: 0 1px 1px #fff;
font: bold 11px Sans-Serif;
padding: 6px 10px;
white-space: nowrap;
vertical-align: middle;
color: #666;
background: transparent;
cursor: pointer;
}
.button:hover, .button:focus {
border-color: #999;
background: -webkit-linear-gradient(top, white, #E0E0E0);
background: -moz-linear-gradient(top, white, #E0E0E0);
background: -ms-linear-gradient(top, white, #E0E0E0);
background: -o-linear-gradient(top, white, #E0E0E0);
-webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
-moz-box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.25), inset 0 0 3px #fff;
}
.button:active {
border: 1px solid #AAA;
border-bottom-color: #CCC;
border-top-color: #999;
-webkit-box-shadow: inset 0 1px 2px #aaa;
-moz-box-shadow: inset 0 1px 2px #aaa;
box-shadow: inset 0 1px 2px #aaa;
background: -webkit-linear-gradient(top, #E6E6E6, gainsboro);
background: -moz-linear-gradient(top, #E6E6E6, gainsboro);
background: -ms-linear-gradient(top, #E6E6E6, gainsboro);
background: -o-linear-gradient(top, #E6E6E6, gainsboro);
}Пропорциональное масштабируемое видео и валидный youtube
Пропорциональное масштабируемое реализовано за счет позиционирования блоков и процентных соотношений. Применимо на резиновых сайтах.
CSS
#containingBlock {
width:50%;
}
.videoWrapper {
position: relative;
padding-bottom:56.25%;
padding-top:25px;
height:0;
overflow:hidden;
}
.videoWrapper div,
.videoWrapper object {
position:absolute;
top:0;
left:0;
width: 100%;
height:100%;
}Код видео с ютуба по умолчанию не валидный, здесь же он добавлен в соответствии стандартам
HTML
<div id="containingBlock">
<div class="videoWrapper">
<div>
<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="480" height="295">
<param name="movie" value="http://www.youtube.com/v/mDRYnaajUcY&hl=en&fs=1&showinfo=0" />
<![endif]-->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="http://www.youtube.com/v/mDRYnaajUcY&hl=en&fs=1&showinfo=0" width="480" height="295">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<p><a href="http://www.adobe.com/go/getflashplayer"><img alt="Get Adobe Flash player" src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"/></a></p>
</object>
</div>
<p>Following is the description of the video embeded in this document</p>
<p>This short clip is about YouTube widescreen formatting. It shows the two main formats (16:9, 4:3) and also explains the best way to create a Flash movie according to the new widescreen format.</p>
</div>
...
</div>Очень мне нравится девочка с видео демки -)
ДЕМО: https://dev.xfor.top/uploads/files/demo/003/index.html