Адаптивное видео YouTube + загрузка ссылками

Адаптивное видео YouTube

Видеоплеер YouTube будет иметь резиновые свойства подстраиваться под размеры окна браузера, дополнительно описано как можно подключать несколько видео ссылками.

Адаптивный видеоплеер YouTube

Видеоплеер YouTube будет занимать всю свободную ширину выделенного пространства, высота определится пропорционально ширине плеера.


<style>
.videoYoutube {
position:relative;
padding-bottom:56.25%;
padding-top:10px; 
height:0; 
overflow:hidden;
}
.videoYoutube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<div class="videoYoutube">
<iframe src="http://www.youtube.com/embed/qY1KNptrp7g" frameborder="0"></iframe>
</div>

Адаптивный видеоплеер YouTube + загрузка ссылками

Видеоплеер YouTube будет адаптивным, можно будет загружать ссылками неограниченное количество видео.

Большое жало - | - Дикая природа сибири - | - Несущие смерть


<style>
.videoYoutube {
position:relative;
padding-bottom:56.25%;
padding-top:10px; 
height:0; 
overflow:hidden;
}
.videoYoutube iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
</style>
<a href="#iwgMjhxp3mA" onclick="videoYoutube('iwgMjhxp3mA');return false;">Большое жало</a> - | - <a href="#h_5I17y9n0o" onclick="videoYoutube('h_5I17y9n0o');return false;">Дикая природа сибири</a> - | - <a href="#qY1KNptrp7g" onclick="videoYoutube('qY1KNptrp7g');return false;">Несущие смерть</a>
<br>
<hr>
<div id="videoYoutube">
</div>
<script>
function videoYoutube(id) {
document.getElementById('videoYoutube').innerHTML = '<div class="videoYoutube"><iframe src="http://www.youtube.com/embed/'+id+'" frameborder="0" allowfullscreen></iframe></div>';
}
</script>

Рейтинг: 4.9/5 из 11



Добавлено Автор Ник Источник Просмотров Комментариев Теги
03-06-2015 Михаил Меренков aTmpl © 1069 0 видео ютуба, адаптивный youtube, видеоплеер youtube, responsive youtube