Nano Hash - криптовалюты, майнинг, программирование

Как сделать встроенное видео YouTube на всю ширину страницы?

Вот скрипт для кода: http://jsfiddle.net/dLPa8/

Если вы прокрутите вниз, там есть встроенное видео с YouTube. Что мне нужно, он должен покрывать всю высоту и ширину страницы. Я имею в виду, что он должен выглядеть как первый раздел (на скрипке).

Я пробовал это:

<iframe src="http://www.youraddress.com" frameborder="0" style="overflow:hidden;overflow-x:hidden;overflow-y:hidden;height:100%;width:100%;position:absolute;top:0px;left:0px;right:0px;bottom:0px" height="100%" width="100%"></iframe>

В какой-то степени это решило проблему, но видео цепляется за верх страницы с помощью вышеуказанного iframe. Как я могу сделать высоту раздела видео полной высотой страницы?

html css youtube
24.11.2013

  • Этот парень написал хороший учебник по адаптивным видео на YouTube avexdesigns.com/responsive-youtube-embed. 25.11.2013
  • Полная страница, которую вы имеете в виду, когда ВСЯ страница? Нравится полный экран? 25.11.2013
  • Ага. Типа полноэкранный. 25.11.2013
  • 1 страница означает одну коробку размером 1920 x 1080 (или 1366 x 768 или любой другой) 25.11.2013
  • @koningdavid, это сработало! Спасибо. 25.11.2013

Ответы:


1

Вот FIDDLE

<iframe id="video" src="//www.youtube.com/embed/5iiPC-VGFLU" frameborder="0" allowfullscreen></iframe>


$(function(){
  $('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });

  // If you want to keep full screen on window resize
  $(window).resize(function(){
    $('#video').css({ width: $(window).innerWidth() + 'px', height: $(window).innerHeight() + 'px' });
  });
});
24.11.2013
  • Чтобы удалить полосу прокрутки, просто используйте body { overflow: hidden; } или body { overflow-x: hidden; }, чтобы сохранить вертикальную прокрутку, если на странице больше элементов. Я обновил Fiddle. 25.11.2013
  • Как сделать так, чтобы это ТОЛЬКО адаптировалось к ширине, а не к высоте, но при этом сохраняло соотношение? 02.06.2015

    • 2

    Правильный стиль для вашего iframe

    iframe {
    position: fixed;
    right: 0;
    bottom: 0;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
}
    12.01.2020

    3

    Попробуйте использовать innerHeight или .clientHeight:

    var doc = document, bod = doc.body, dE = doc.documentElement;
var wh = innerHeight || dE.clientHeight || bod.clientHeight;

    var wh теперь содержит высоту окна без полосы прокрутки.

    24.11.2013
    Новые материалы
    Кластеризация: более глубокий взгляд
    Кластеризация — это метод обучения без учителя, в котором мы пытаемся найти группы в наборе данных на основе некоторых известных или неизвестных свойств, которые могут существовать. Независимо от..
    Как написать эффективное резюме
    Предложения по дизайну и макету, чтобы представить себя профессионально Вам не позвонили на собеседование после того, как вы несколько раз подали заявку на работу своей мечты? У вас может..
    Частный метод Python: улучшение инкапсуляции и безопасности
    Введение Python — универсальный и мощный язык программирования, известный своей простотой и удобством использования. Одной из ключевых особенностей, отличающих Python от других языков, является..
    Как я автоматизирую тестирование с помощью Jest
    Шутка для победы, когда дело касается автоматизации тестирования Одной очень важной частью разработки программного обеспечения является автоматизация тестирования, поскольку она создает..
    Работа с векторными символическими архитектурами, часть 4 (искусственный интеллект)
    Hyperseed: неконтролируемое обучение с векторными символическими архитектурами (arXiv) Автор: Евгений Осипов , Сачин Кахавала , Диланта Хапутантри , Тимал Кемпития , Дасвин Де Сильва ,..
    Понимание расстояния Вассерштейна: мощная метрика в машинном обучении
    В обширной области машинного обучения часто возникает необходимость сравнивать и измерять различия между распределениями вероятностей. Традиционные метрики расстояния, такие как евклидово..
    Обеспечение масштабируемости LLM: облачный анализ с помощью AWS Fargate и Copilot
    В динамичной области искусственного интеллекта все большее распространение получают модели больших языков (LLM). Они жизненно важны для различных приложений, таких как интеллектуальные..