Как я могу добавить максимальный размер к моим видео на YouTube?

Я новичок в stackoverflow и в веб-дизайне в целом, поэтому прошу прощения, если это легко исправить (вероятно, я все еще учусь) или если мой родной язык не прав.

Я просто пытаюсь сделать так, чтобы мои видео на YouTube не становились больше определенного размера. Они выглядят так, как я хочу, на мобильных устройствах и планшетах из-за кода «mobile.css», который я написал в него. Но на большом экране он занимает слишком много места, и я хочу ограничить размер видео. Я надеюсь это имеет смысл. Большое спасибо за вашу помощь!

Я пытался сделать кучу вещей, но не могу найти то, что работает с моим кодом «mobile.css». Я уменьшил размер видео на экране компьютера, но затем он уменьшил их на телефоне или планшете, чего я не хочу.

<head>
<link rel="stylesheet" type="text/css" href="mobile.css">
</head>

<div class="video-wrap">
  <div class="video-container">
    <iframe src="https://www.youtube.com/embed/drv3BP0Fdi8"></iframe>
  </div>
</div>

Это вся страница, ребята. Надеюсь, это поможет.

<!DOCTYPE html>
<html>
<head>

<body style="background-color:linen;">

<style>
body {margin:0;}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #333;
  position: fixed;
  top: 0;
  width: 100%;
}

li {
  float: left;
}

li a {
  display: block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover:not(.active) {
  background-color: #111;
}

.active {
  background-color: #185a83;
}
</style>
</head>
<body>

<ul>
  <li><a href="index.html">Home</a></li>
  <li><a href="quotes.html">Quotes</a></li>
  <li><a class="active" href="youtube.html">Youtube</a></li>
  <li><a href="blog.html">My Blog</a></li>
</ul>


<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>Page Title</title>
</head>
<body>

    <br>
    <br>

<h1 style="color:black;text-align:center">Some Helpful YouTube Videos</h1>

<head>
<link rel="stylesheet" type="text/css" href="mobile.css">
</head>


<br>
<br>

<div class="video-responsive">
<iframe width="853" height="480" src="https://www.youtube.com/embed/drv3BP0Fdi8" " frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>


<div class="video-responsive">
<iframe width="853" height="480" src="https://www.youtube.com/embed/JWUuno-K5YE" " frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<br>
<br>

<div class="video-responsive">
<iframe width="853" height="480" src="https://www.youtube.com/embed/Lp7E973zozc" " frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

<br>
<br>

<div class="video-responsive">
<iframe width="853" height="480" src="https://www.youtube.com/embed/w7rewjFNiys" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>

</body>
</html>
0
задан Makyen 30 June 2019 в 01:33
поделиться

4 ответа

просто добавьте высоту и ширину в iframe

, если вы хотите занять общую ширину элемента, тогда сделайте width:100%

или вы также можете указать высоту и ширину на основе ваших требований, например так ,

iframe{
height:300px;
width:300px;
}
<div class="video-wrap">
  <div class="video-container">
    <iframe src="https://www.youtube.com/embed/drv3BP0Fdi8"></iframe>
  </div>
</div>
0
ответ дан Amaresh Amar 30 June 2019 в 01:33
поделиться

https://jsfiddle.net/xpzdnw1t /

.video-container {
  max-width: 100vw;
  width: 100%;
  height: 500px;
}

iframe {
  width: 100%;
  height: 100%;
}
<div class="video-wrap">
  <div class="video-container">
    <iframe width="560" height="315" src="https://www.youtube.com/embed/drv3BP0Fdi8" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
  </div>
</div>
0
ответ дан Irin 30 June 2019 в 01:33
поделиться

То, что вы хотите, на удивление сложно достичь, даже если вы ожидаете, что это будет довольно просто. Полностью адаптивное встроенное видео iframe может быть достигнуто с помощью небольшого обходного пути. По сути, вам нужно обернуть свой iframe в контейнер с позицией relative, чтобы вы могли абсолютно точно позиционировать iframe внутри, ограничивая переполнение и создавая искусственное дно с помощью отступов, чтобы сместить соотношение сторон.

Рассмотрим этот пример: https://jsfiddle.net/8kh9j7wx/1/

Видео всегда будет находиться в пределах родительского элемента и всегда будет сохранить 100% ширину указанного элемента, сохраняя при этом очень важное соотношение сторон, на которое другие ответы здесь не в состоянии ответить.

Вот ваша измененная разметка:

<div class="video-responsive">
    <iframe width="420" height="315" src="https://www.youtube.com/embed/2SUqC8PGrtU" frameborder="0" allowfullscreen></iframe>
</div>

Вот ваш CSS:

.video-container {
    overflow:hidden;
    padding-bottom:56.25%;
    position:relative;
    height:0;
}
.video-container iframe{
    left:0;
    top:0;
    height:100%;
    width:100%;
    position:absolute;
}

Вы можете, конечно, ограничьте ширину до максимума, объявив max-width на вашем элементе контейнера, и отцентрируйте его, используя margin:auto.

0
ответ дан Claire 30 June 2019 в 01:33
поделиться

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

.video-container {
    position:relative;
    padding-bottom:56.25%;
    padding-top:30px;
    height:0;
    overflow:hidden;
}

.video-container iframe{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
<div class="video-wrap">
  <div class="video-container">
    <iframe src="https://www.youtube.com/embed/drv3BP0Fdi8"></iframe>
  </div>
</div>
-1
ответ дан Makdia Hussain 30 June 2019 в 01:33
поделиться