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

Уменьшить размер 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>

25% 100%

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

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