Мини размер для фрейма



Уменьшить размер iframe окна под размер страницы при публикации видео с youtube с возможностью перехода на 100%  режим отображения можно элементарно добавив код CSS,который сделает всю работу самостоятельно.От Вас потребуется лишь добавить CSS-код в шаблон и при добавлении видеоролика заключить  полученный код iframe в стандартный блок <div>...</div> такого вида.



Установка кода CSS для миниатюры iframe-видео.

Минимальный вариант фрейма видеоролика расположенного на странице более органично впишется в дизайн,чем стандартный полноценный видеоплеер с понравившемся вам роликом с youtub или другого видеохостинга.Но так как одновременно для посетителя будет предоставлен моментальный переход в полноценный режим,то это не вызовет у него неудобств.

Код CSS,который одновременно уменьшит размер окна и позволит показать полноценный вариант расположен ниже.Скопировав данный код следует установить его или в шаблон или же просто в любой гаджет поддерживающий НТМЛ.
<style>
.YouTube {text-align: center; color: #fff;}/*цвет текста кнопки*/
.YouTube input {display: none;}
.YouTube label {background: #044; padding: 5px 7px;}/*цвет кнопки*/
.YouTube label:hover, .YouTube input:checked + label {background: rgba(0, 0, 0, 0.6);}
.YouTube input:nth-of-type(1):checked ~ div {width: 25%;}/*размер миниатюры*/
.YouTube input:nth-of-type(4):checked ~ div {width: 100%;}
.YouTube > div {
  margin: 0 auto;
  -moz-transition: 1s;
  -webkit-transition: 1s;
  -o-transition: 1s;
  transition: 1s;}
.YouTube > div > div {
  padding-bottom: 56.25%;/*позиционирование блока*/
  position: relative;}
.YouTube iframe {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;}
</style>
@v-gol.ru

Смотреть ещё

Оформление блоков для кодаСлайдер- ротатор для блога
Ротатор для баннеров
Эффекты для фото на CSS.
Как добавить форум на блог

НТМЛ мини макси для видео с youtubе

Следующую часть НТМЛ-кода с кнопками перехода от мини до макси следует установить там где будет запланирован показ видео с youtubе или нужного фрейма стороннего сайта.
<div class="YouTube">
  <input type="radio" name="V-G" checked="checked" id="vg1"/><label for="vg1">25%</label> <input type="radio" name="V-G" id="vg2"/><label for="vg2">100%</label>
  <div>
    <div>
      <iframe width="600" height="415" src="https://www.youtube.com/embed/et281UHNoOU" frameborder="0" allowfullscreen></iframe>
    </div>
  </div>
</div>



Настройки для уменьшения фрейма.

Настроек здесь немного и все они внесены в код CSS.Предварительно можно скопировать весь код целиком и настроить в визуальном онлайн редакторе.

Отправить комментарий