Как создать собственные коэффициенты встраивания видео в начальной загрузке?
Обновлять:
Мне удалось встроить нестандартный размер загрузочного видео (пропорция: 4x5)... однако, в отличие от стандартных загрузочных встраиваний, оно, похоже, не подчиняется МАКСИМАЛЬНОЙ ВЫСОТЕ, где бы я его ни помещал - в iframe или вокруг него. это.
(чтобы увидеть проблему, просмотрите страницу и просмотрите ее в полном размере — видео на высоком телефоне показывает проблему… оно слишком высокое)
есть идеи, как это исправить или способы обойти?
<!DOCTYPE html>
<html lang = "en">
<head>
<meta charset = "UTF-8">
<meta name = "viewport" content = "width=device-width, initial-scale=1.0">
<title>Multiple Responsive Slideshows</title>
<!-- Bootstrap CSS -->
<link href = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel = "stylesheet">
<style>
body {
background-color: violet;
margin: 10px; /* Reset margin to 0 */
padding: 0; /* Reset padding to 0 */
}
.container {
background-color: green;
margin-bottom: 50px;
padding: 10px;
display: flex;
justify-content: center;
align-items: center; }
.slideshow-container {
position: relative;
width: 100%;
margin: auto;
overflow: hidden;
background-color: #b9dbe5;
display: flex; /* Use flexbox layout */
justify-content: center; /* Center items horizontally */
align-items: center; /* Center items vertically */
}
.carousel-item {
text-align: center; /* Center images horizontally */
}
.slideshow-container img,
.slideshow-container iframe {
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
/* Show arrows only on hover */
.slideshow-container:hover .prev,
.slideshow-container:hover .next {
display: block;
}
.prev, .next {
display: none;
cursor: default; /* Change cursor to default */
z-index: 1000;
color: silver;
font-weight: bold;
font-size: 30px;
position: absolute;
top: 50%;
transform: translateY(-50%);
width: auto;
padding: 16px;
border-radius: 0 3px 3px 0;
user-select: none;
text-decoration: none; /* Remove underline */
}
.prev:hover, .next:hover {
text-decoration: none; /* Remove underline */
color: silver; /* Change color on hover */
}
.prev {
left: 0;
}
.next {
right: 0;
border-radius: 3px 0 0 3px;
}
.prev.disabled, .next.disabled {
pointer-events: none;
opacity: 0.5;
}
/* //////// Media query //////// */
@media screen and (max-width: 650px) {
body {
background-color: goldenrod;
/* Videos and can be full width on mobile */
}
.carousel-item img {
width: 100% !important;
padding: 0 !important;
}
.carousel-item iframe {
width: 100% !important;
height: 100% !important;
padding: 0 !important;
}
.vidbox {
width: 100% !important;
height: 100% !important;
max-width: 100% !important;
max-height: 100% !important;
}
}
/* Custom aspect ratio for 4x5 video */
.embed-responsive-4by5 {
padding-bottom: 125%; /* 5/4 aspect ratio */
}
</style>
</head>
<body>
<div class = "container" style = "max-width: 1000px">
<div id = "myCarousel1" class = "slideshow-container carousel slide" data-ride = "carousel" data-interval = "false">
<!-- Image Slides -->
<div class = "carousel-inner">
<div class = "carousel-item active">
<img src = "https://source.unsplash.com/random/1200x600/?kitten" style = "padding: 30px;">
</div>
<div class = "carousel-item">
<img src = "https://source.unsplash.com/random/900x500/?shark" style = "max-height: 150px;">
</div>
<!-- Video Slide -->
<div class = "carousel-item">
<div id = "phone" class = "vidbox embed-responsive embed-responsive-4by5" style = "max-height: 80vh;">
<iframe src = "https://player.vimeo.com/video/912417077?badge=0&autopause=0&player_id=0&app_id=58479" frameborder = "0" allow = "autoplay; fullscreen; picture-in-picture" allowfullscreen style = "padding: 0px"></iframe>
</div>
</div>
<!-- Video Slide -->
<div class = "carousel-item">
<div id = "nochill" class = "vidbox embed-responsive embed-responsive-16by9" style = "max-width: 800px; margin: auto; text-align: center;">
<iframe src = "https://player.vimeo.com/video/143374377?h=760ef66606&title=0&byline=0&portrait=0" frameborder = "0" allow = "autoplay; fullscreen; picture-in-picture" allowfullscreen style = "padding: 0px;"></iframe>
</div>
</div>
<!-- Video Slide -->
<div class = "carousel-item">
<div id = "squarevid" class = "vidbox embed-responsive embed-responsive-1by1" style = "max-height: 80vh;">
<iframe src = "https://player.vimeo.com/video/21480736?h=41e5c84cdf&color=183eb1" frameborder = "0" allow = "autoplay; fullscreen; picture-in-picture" allowfullscreen style = "padding: 0px"></iframe>
</div>
</div>
<!-- Navigation Arrows -->
<a class = "prev" href = "#myCarousel1" data-slide = "prev">❮</a>
<a class = "next" href = "#myCarousel1" data-slide = "next">❯</a>
</div>
</div>
<!-- Bootstrap JS -->
<script src = "https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src = "https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<!-- Navigation Click anywhere to navigate -->
<script>
$(document).ready(function(){
$('.carousel-inner').on('click', function(e) {
if (e.pageX < $(this).width() / 2) {
$(this).closest('.carousel').carousel('prev');
} else {
$(this).closest('.carousel').carousel('next');
}
});
});
</script>
</body>
</html><!-- Video Slide -->
<div class = "carousel-item">
<div id = "phone" class = "vidbox embed-responsive embed-responsive-4by5" style = "max-height: 80vh;">
и добавив этот CSS:
/* Custom aspect ratio for 4x5 video */
.embed-responsive-4by5 {
padding-bottom: 125%; /* 5/4 aspect ratio */
}
Документы, на которые я ссылаюсь, re: embeds и пользовательские пропорции:
Ответы 2
За кулисами Bootstrap использует следующую формулу:
.embed-responsive-XbyY {
padding-top: 100% * Y / X;
}
Это означает, что вы можете добавить свой собственный класс в свой собственный CSS, если вам неудобно перекомпилировать Bootstrap или переопределить его переменные:
.embed-responsive-4by5 {
padding-top: 125%;
}
Во-первых, это другой вопрос. Во-вторых, если вы хотите, чтобы видео имело max-height, поскольку вы знаете его соотношение, вы можете обернуть его в центрированный элемент div с max-width из max-height * .8. Короче говоря, за видео max-height: 800px вы даете обертку max-width: 640px. Это может сработать, если применить max-width к самому видео. Если это не так, используйте обертку.
Я только что увидел, что ты хочешь max-height из 600px. max-width: 480px должен добиться именно этого. Если вы хотите получить полное объяснение, вам нужно будет задать его отдельным вопросом. Короче говоря, соотношение сторон Bootstrap использует устаревший метод (когда видео абсолютно позиционируется в пустом контейнере, height которого определяется процентом, который на самом деле является процентом от width, а не от height). Это немного хак, но работает кроссбраузерно. Технически высота содержимого контейнера равна 0. Таким образом, вы можете контролировать его height только через его width, который определяет top-padding.
это сработало, большое спасибо (использование ::before в CSS), так как в другом потоке это помогло убедиться, что это работает каждый раз.
Как и в документах, вам следует перекомпилировать, чтобы получить собственное соотношение сторон. Это делается путем переопределения переменной в файле _variables.scss:
$embed-responsive-aspect-ratios: (
(21 9),
(16 9),
(4 3),
(1 1)
) !default;
Вместо изменения исходных файлов ваш main.scss должен выглядеть так:
// main.scss
$embed-responsive-aspect-ratios: (
(21 9),
(16 9),
(4 3),
(4 5),
(1 1)
);
import 'bootstrap/_bootstrap.scss';
// rest of your styles...
// now should have:
.embed-responsive-4by5 {
// ...
}
Не могли бы вы уточнить, что вы подразумеваете под «как в документах»? Если описанный выше метод добавления пользовательского соотношения в Bootstrap описан в их официальной документации, рассмотрите возможность ссылки на ресурс в своем ответе. Обратите внимание, что этот вопрос предназначен только для v4.x.
здравствуйте, спасибо за ответы. мне удалось найти исправление, добавив новый элемент embed-response-4by5 в div, а затем определив его в CSS: /* Пользовательское соотношение сторон для видео 4x5 / .embed-Response-4by5 { padding-bottom: 125%; / соотношение сторон 5/4 */ } он отлично работает и правильно масштабируется, но проблема, с которой я столкнулся сейчас, заключается в том, что я не могу установить максимальную высоту. есть идеи как исправить?
да! Спасибо. это решение похоже на то, что я в конечном итоге использовал. проблема, с которой я сейчас сталкиваюсь, заключается в том, что, хотя теперь он масштабируется правильно, как и другие стандартные встраивания, он не подчиняется МАКСИМАЛЬНОЙ ВЫСОТЕ, если я добавляю его в iframe видео или в элементы div, в которых оно находится. у вас есть идеи? как это исправить? кажется, что он игнорирует любые запросы на максимальную высоту, где бы вы его ни разместили. например если бы я хотел, чтобы максимальная высота этого видео была 600 пикселей.