Can someone tell me how I can position iframes containing links to YT-videos so that they are divived evenly over a page horizontally instead of justified to the left, so that an empty space is left on the right?
Here's the html-code of the page:
<!DOCTYPE html>
<html lang="nl"><!-- InstanceBegin template="/Templates/HB-rood-logo_video.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- InstanceBeginEditable name="doctitle" -->
<title>Test-video 2</title>
<!-- InstanceEndEditable -->
<!-- Bootstrap -->
<link href="../css/bootstrap-4.4.1.css" rel="stylesheet">
<link href="../css/stijlblad_HB_2r.css" rel="stylesheet" type="text/css">
<!-- InstanceBeginEditable name="head" -->
<!-- InstanceEndEditable -->
</head>
<body>
<div class="container-fluid m-auto">
<div class="row">
<div class="col-lg-12 header fixed-top">
<nav class="navbar fixed-top navbar-expand-lg navbar-light"> <a href="../html/Index.html" target="_self" class="navbar-brand"><img src="../afbeeldingen/Dickenslogo-HB.png" alt="logo" width="400" class="img-fluid float-left"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent3" aria-controls="navbarSupportedContent3" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent3">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Home</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a href="../html/Index.html" target="_self" class="dropdown-item">About us</a> <a href="../html/meetings.html" target="_self" class="dropdown-item">Meetings</a></div></li>
<li class="nav-item"> <a href="../html/book_of_study.html" target="_self" class="nav-link">Book of Study</a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dutch Dickensian</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2"> <a href="../html/Dutch_Dickensian_index_1.html" target="_self" class="dropdown-item">Index</a> <a href="../html/Dutch_Dickensian_online.html" target="_self" class="dropdown-item">Online</a></div>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> News </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown3"> <a href="../html/laatste_nieuws.html" target="_self" class="dropdown-item">Latest</a> <a href="../html/nieuwsarchief.html" target="_self" class="dropdown-item">Archive</a></div>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown4" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Images</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown4"> <a href="../html/fotos.html" target="_self" class="dropdown-item">Photos</a> <a href="../html/videos.html" target="_self" class="dropdown-item">Videos</a></div>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown5" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Links</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown5"> <a href="../html/branches.html" target="_self" class="dropdown-item">Branches</a> <a href="../html/sites_of_special_interest.html" target="_self" class="dropdown-item">Sites of Special Interest</a></div>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown6" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dutch Connections</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown6"> <a href="../html/Dutch_Connections.html" target="_self" class="dropdown-item">English page</a> <a href="../html/Nederlandse_Connecties.html" target="_self" class="dropdown-item">Nederlandse pagina</a></div>
</li></ul><form class="d-flex">
<input class="form-control me-2" type="text" placeholder="Search site">
<button class="btn btn-searcher" type="button">:magnifying_glass_tilted_left:</button>
</form>
</div></nav>
<form class="form-inline my-2 my-xs-0 small-screen"></form>
</div>
</div>
<div class="row top">
<div class="col-lg-12"><!-- InstanceBeginEditable name="paginatitel" --><h1>Video's</h1>
<h2>Haarlem Branch</h2>
<!-- InstanceEndEditable --></div>
</div>
<!-- InstanceBeginEditable name="video" -->
<div class="row main">
<div class="row">
<div class="col-md-6">
<figure>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/EBcL7xK7JUQ"></iframe>
</div>
<figcaption>
<p>Dit is het bijschrift</p>
</figcaption>
</figure>
</div>
<div class="col-md-6">
<figure>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tLB6ryTsQos" ></iframe>
</div>
<figcaption>
<p>Dit is het bijschrift</p>
</figcaption>
</figure>
</div>
<div class="row">
<div class="col-md-6">
<video controls ></video>
<p class="text-center">Dit is het bijschrift</p><br>
</div>
</div>
<div class="col-md-6">
<video controls></video>
<p class="text-center">Dit is het bijschrift</p><br>
</div>
</div>
</div>
<!-- InstanceEndEditable -->
<div class=" footer">
<div class="row">
<div class="col-md-4">
<h6>:e_mail:<a href= "mailto:circumlocution-office@xs4all.nl " class="foot"> Secretary </a></h6>
</div>
<div class="col-md-4">
<h6>:e_mail:<a href="mailto:eig.vandaalen@ziggo.nl" class="foot"> Webmaster </a></h6>
</div>
<div class="col-md-4">
<h6>:e_mail:<a href="mailto:jcvkessel@yahoo.com" class="foot"> Editor The Dutch Dickensian</a></h6>
</div>
</div>
</div>
</div>
<!-- body code goes here -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../js/jquery-3.4.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap-4.4.1.js"></script>
</body>
<!-- InstanceEnd --></html>It's based on the following template:
<!DOCTYPE html>
<html lang="nl">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- TemplateBeginEditable name="doctitle" -->
<title>Naamloos document</title>
<!-- TemplateEndEditable -->
<!-- Bootstrap -->
<link href="../css/bootstrap-4.4.1.css" rel="stylesheet">
<link href="../css/stijlblad_HB_2r.css" rel="stylesheet" type="text/css">
<!-- TemplateBeginEditable name="head" -->
<!-- TemplateEndEditable -->
</head>
<body>
<div class="container-fluid m-auto">
<div class="row">
<div class="col-lg-12 header fixed-top">
<nav class="navbar fixed-top navbar-expand-lg navbar-light"> <a href="../html/Index.html" target="_self" class="navbar-brand"><img src="../afbeeldingen/Dickenslogo-HB.png" alt="logo" width="400" class="img-fluid float-left"></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent3" aria-controls="navbarSupportedContent3" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span></button>
<div class="collapse navbar-collapse" id="navbarSupportedContent3">
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Home</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown1"> <a href="../html/Index.html" target="_self" class="dropdown-item">About us</a> <a href="../html/meetings.html" target="_self" class="dropdown-item">Meetings</a></div></li>
<li class="nav-item"> <a href="../html/book_of_study.html" target="_self" class="nav-link">Book of Study</a> </li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown2" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dutch Dickensian</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown2"> <a href="../html/Dutch_Dickensian_index_1.html" target="_self" class="dropdown-item">Index</a> <a href="../html/Dutch_Dickensian_online.html" target="_self" class="dropdown-item">Online</a></div>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown3" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> News </a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown3"> <a href="../html/laatste_nieuws.html" target="_self" class="dropdown-item">Latest</a> <a href="../html/nieuwsarchief.html" target="_self" class="dropdown-item">Archive</a></div>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown4" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">Images</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown4"> <a href="../html/fotos.html" target="_self" class="dropdown-item">Photos</a> <a href="../html/videos.html" target="_self" class="dropdown-item">Videos</a></div>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown5" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Links</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown5"> <a href="../html/branches.html" target="_self" class="dropdown-item">Branches</a> <a href="../html/sites_of_special_interest.html" target="_self" class="dropdown-item">Sites of Special Interest</a></div>
</li>
<li class="nav-item dropdown"> <a class="nav-link dropdown-toggle" href="#" id="navbarDropdown6" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"> Dutch Connections</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown6"> <a href="../html/Dutch_Connections.html" target="_self" class="dropdown-item">English page</a> <a href="../html/Nederlandse_Connecties.html" target="_self" class="dropdown-item">Nederlandse pagina</a></div>
</li></ul><form class="d-flex">
<input class="form-control me-2" type="text" placeholder="Search site">
<button class="btn btn-searcher" type="button">:magnifying_glass_tilted_left:</button>
</form>
</div></nav>
<form class="form-inline my-2 my-xs-0 small-screen"></form>
</div>
</div>
<div class="row top">
<div class="col-lg-12"><!-- TemplateBeginEditable name="paginatitel" --><h1>Titel</h1>
<h2>Onderschrift</h2>
<!-- TemplateEndEditable --></div>
</div>
<!-- TemplateBeginEditable name="video" -->
<div class="row main">
<div class="row">
<div class="col-md-6">
<figure>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"></iframe>
</div>
<figcaption>
<p>Dit is het bijschrift</p>
</figcaption>
</figure>
</div>
<div class="col-md-6">
<figure>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item"></iframe>
</div>
<figcaption>
<p>Dit is het bijschrift</p>
</figcaption>
</figure>
</div>
<div class="row">
<div class="col-md-6">
<video controls ></video>
<p class="text-center">Dit is het bijschrift</p><br>
</div>
</div>
<div class="col-md-6">
<video controls></video>
<p class="text-center">Dit is het bijschrift</p><br>
</div>
</div>
</div>
<!-- TemplateEndEditable -->
<div class=" footer">
<div class="row">
<div class="col-md-4">
<h6>:e_mail:<a href= "mailto:circumlocution-office@xs4all.nl " class="foot"> Secretary </a></h6>
</div>
<div class="col-md-4">
<h6>:e_mail:<a href="mailto:eig.vandaalen@ziggo.nl" class="foot"> Webmaster </a></h6>
</div>
<div class="col-md-4">
<h6>:e_mail:<a href="mailto:jcvkessel@yahoo.com" class="foot"> Editor The Dutch Dickensian</a></h6>
</div>
</div>
</div>
</div>
<!-- body code goes here -->
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="../js/jquery-3.4.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="../js/popper.min.js"></script>
<script src="../js/bootstrap-4.4.1.js"></script>
</body>
</html>
This is my custom css-stylesheet:
@charset "UTF-8";
body {
background-color:white;
padding-bottom: 90px;
}
.top{
margin-top: 10px;
margin-right: 5px;
margin-left: 5px;
margin-bottom: 10px;
}
.main{
margin: 10px;
}
.top {
border-bottom: thin double #FF3734;
}
.article {
padding-left: 20px;
padding-top:20px;
background-color:white;
min-height: 300px;
overflow-y: auto;
}
.aside {
background-color: #801B19;
padding-top: 12px;
padding-right: 12px;
padding-bottom: 12px;
padding-left: 12px;
border: thick solid #FF3734;
border-radius: 12px;
overflow-y: auto;
clear: both;
}
h1{
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-weight: bolder;
line-height: 2em;
}
h2{
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-weight: bold;
line-height: 1.5em;
text-decoration: none;
}
h3 {
color: #000000;
text-align: left;
font-weight: bolder;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
.navbar-light .navbar-nav .nav-link {
color: rgba(2,2,2,1.00);
}
.navbar-light .navbar-nav .nav-link:hover, .navbar-light .navbar-nav .nav-link:focus {
color: rgba(93,47,46,1.00);
}
.navbar-light .navbar-nav .nav-link.disabled {
color: rgba(247,246,235,1.00);
}
.navbar-light .navbar-nav .show > .nav-link,
.navbar-light .navbar-nav .active > .nav-link,
.navbar-light .navbar-nav .nav-link.show,
.navbar-light .navbar-nav .nav-link.active {
color: rgba(120,33,31,1.00);
}
.navbar-light .navbar-toggler {
color: rgba(68,63,1,1.00);
border-color: rgba(68,63,1,1.00);
}
.navbar-light .navbar-toggler-icon {
background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' width='30' height='30' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(0, 0, 0, 0.5)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}
.navbar-expand-lg{
background-color: #E6AAA9;
}
.footer {
background-color: #FF6C6A;
padding-top:20px;
text-align: center;
bottom: 0;
left:0;
position: fixed;
height: 70px;
display: block;
width: 100%;
}
.header {
padding-top: 15px;
padding-right: 2%;
padding-left: 2%;
background-color: #E6AAA9;
position: static;
display: block;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
height: 120px;
width: 100%;
}
.navbar {
background-color: #E6AAA9;
}
.imageclass1{
max-width: 40%;
height: auto;
float: right;
margin: 15px;
padding: 5px;
border: medium double #804140;
}
.imageclass2{
width:70%;
height: auto;
display:block;
margin-left: auto;
margin-right: auto;
margin-bottom: 20px;
margin-top: 20px;
}
.slide-image{
width: auto;
display: block;
margin-left: auto;
margin-right: auto;
max-height: 600px;
}
h1{
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-weight: bolder;
text-align: center;
}
h2{
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, "sans-serif";
font-weight: bold;
text-align: center;
}
h3 {
color: #000000;
text-align: left;
font-weight: bolder;
font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
p{
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
color: #000000;
font-weight: lighter;
text-align: left;
}
p.light {
color: #FFFFFF;
font-weight: 400;
text-align: center;
font-variant: small-caps;
line-height: 30px;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
}
p.light2{
color:#F7F6EB;
font-size: 16px;
}
h4 {
color: #FFFFFF;
font-family: "Gill Sans", "Gill Sans MT", "Myriad Pro", "DejaVu Sans Condensed", Helvetica, Arial, sans-serif;
font-weight: 600;
text-align: center;
font-style: normal;
letter-spacing: 3pt;
}
h5 {
color: #0D0D0D;
font-family: Consolas, "Andale Mono", "Lucida Console", "Lucida Sans Typewriter", Monaco, "Courier New", monospace;
font-weight: bold;
line-height: 27px;
}
h6 {
color: #000000;
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-size: 18px;
font-weight: bold;
text-align: center;
}
a:link{
color:#804140;
}
a:visited{
color:#AD2810;
}
a:hover{
color:#8C8303;
font-style: bolder;
}
a:active{
color:#97224B;
font-style:bold;
}
a.foot:link{
color: #262401;
}
a.foot:visited{
color: #091D3E;
}
a.foot:hover{
color:#801E1E;
font-weight: 600;
}
a.foot:active{
color:#E9E6CF;
}
a.rb:link{
color: hsla(1,55%,78%,1.00);
text-decoration-line: underline;
}
a.rb:visited{
color: darkturquoise;
}
a.rb:hover{
font-weight: 500;
text-decoration: none;
}
a.rb:active{
color:cornflowerblue;
font-weight: 500;
}
.btn-searcher {
background-color: #E6AAA9;
border: thin solid #804140;
padding: 5px;
margin-left: 5px;
height: 38px;
width: 38px;
}
.btn-searcher:hover {
background-color: #FF3734;
}
.btn-searcher:focus{
background-color: #804140
}
.alert-info{
margin-bottom: 5px;
background-color: #DCDDCD;
margin-top:5px;
margin-right: 5px;
padding: 4px;
}
h5 {
font-family: Constantia, "Lucida Bright", "DejaVu Serif", Georgia, serif;
font-weight: bold;
text-align: left;
}
.quote {
font-style: italic;
font-size: 16px;
}
.img-thumbnail.img-fluid {
display: block;
width: 90%;
margin-left: auto;
margin-right: auto;
border: thin groove #FF6C6A;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
margin-bottom: 8px;
}
.pagination {
font-family: Cambria, "Hoefler Text", "Liberation Serif", Times, "Times New Roman", serif;
text-align: center;
}
.sub-background{
background-color: hsla(0,13%,75%,0.70)
}
iframe {
margin-left: auto;
margin-right:auto;
display: block;
}
video {
width: 100%;
height: auto;
display: block;
margin-right: auto;
margin-left: auto;
border: thin solid hsla(0,0%,0%,1.00);
}
.container-fluid{
width: 90%;
}
@media screen and (min-width:280px) and (max-width: 414px){
body{
padding-bottom: 90px;
}
.imageclass1{
width: 100%;
margin-left: auto;
margin-right: auto;
margin-top:10px;
margin-bottom: 10px;
float:none;
}
h1{
font-size:30px;
line-height: normal;
}
h2{
font-size: 25px;
line-height:normal;
}
h3{
font-size: 25px;
line-height: 40px;
}
h4{
font-size: 20px;
letter-spacing: 1px;
}
h5{
font-size: 12pt;
line-height: 18pt;
}
h6{
font-size: 12pt;
line-height: 15pt
}
p.light{
font-size: 15px;
line-height: 15px
}
p{
font-size:16px;
}
.header{
height: 90px
}
.footer{
padding-top: 5px;
height: 90px;
}
.navbar-brand {
width: 110px;
height: auto;
}
.imageclass1{
max-width: 100%;
height: auto;
margin-left: auto;
margin-right: auto;
display: block;
}
}
@media screen and (min-width: 575px){
.footer{
height: 110px;
padding: 10px;
}
.navbar-brand{
width: 125px;
height: auto;
}
.header{
height: 105px;
}
body{
padding-bottom: 120px;
}
@media (min-width: 768px){
.footer{
height: 60px;
padding-top: 15px;
}
h6{
font-size: 15px;
}
body{
padding-bottom: 70px;
}
}
@media screen and (min-width: 992px){
h6{
font-size: 18px;
}
.nav-item{
font-size: 14px;
}
.form-control{
width: 120px;
}
}
@media screen and (min-width:1200px){
.navbar-brand{
width: 150px;
height: auto;
}
.main{
margin-top: 30px;
}
.form-control{
width: 160px;
margin-left:8px;
}
.nav-item{
font-size: 17px;
}
}
}
.center {
}The result thus far:
What properties or classes should I use to justify the video's evenly, any one an idea? I tried to find the solution on a search on internet, but none worked.
1 Correct answer
OK Well you don't need <div class="row main"> </div> (see in red below)
Starts here:
<!-- InstanceBeginEditable name="video" -->
<div class="row main">
Closing div tag ends here:
</div>
<!-- body code goes here -->
Just removing that div will disperse your videos, well the top 2, evenly across the width of the browser window. Theres obviously some conflict with nesting a row within a row.
Your 2 other videos code should be as follows: (observe the bold text) The other </div> and <div class="footer">
25
Replies
<script src="../js/bootstrap-4.4.1.js"></script>1. FYI: Critical support for Bootstrap ver 4 ended 7 months ago (January 2023).
The current stable release is Bootstrap ver 5 which can be sourced directly from Bootstrap's CDN.
Replace your current links to Bootstrap with these:
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!--Bootstrap JS-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
By @Nancy OShea
Doing that would require changing some of the utilities classes within the code, right, which adds to the problem for the OP. Whilst v4 is not the current version there are plenty of v4 Bootstrap websites Worldwide. Whats critical that v5 should be used, other than its the latest version and possibly the most sensible approach to take if one is building a new website. Is Bootstrap css/js vunerable to hackers or something?
Am I correct in thinking DW still only offers v4 by default and never introduced v5?
I suggested that the OP created a new thread as the old one was getting way too long and responses were becoming buried, some answers were not addressing the OPs immediate issue and some were completely off-topic.
No problem. In fact, this can all be achieved with FAR LESS CODE than what the OP has going on now.
BOOTSTRAP 5.2.3 ~ evenly distributed responsive videos:
==============
<!doctype html>
<html lang="en">
<head>
<title>Bootstrap 5.2.3 Responsive Video Ratios</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<!--Bootstrap JS Bundle-->
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4" crossorigin="anonymous"></script>
</head>
<body>
<div class="container-fluid">
<div class="row">
<!--REPEAT THIS COL AS MANY TIMES AS NEEDED-->
<div class="col mx-auto text-center">
<h2>YouTube Hosted ~ Aspect ratio 1:1</h2>
<!--ADJUST ASPECT RATIO TO SUIT VIDEO: 1x1, 4x3, 16x9 or 21x9-->
<div class="ratio ratio-1x1">
<!--USE PUBLICLY AVAIL YOUTUBE VIDEOS-->
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
<div class="col mx-auto text-center">
<h2>YouTube Hosted ~ Aspect ratio 4:3</h2>
<div class="ratio ratio-4x3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
<div class="col mx-auto text-center">
<h2>YouTube Hosted ~ Aspect ratio 16:9</h2>
<div class="ratio ratio-16x9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
<div class="col mx-auto text-center">
<h2>YouTube Hosted ~ Aspect ratio 21:9</h2>
<div class="ratio ratio-21x9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</div><!--/END ROW-->
<hr>
<div class="row">
<div class="col mx-auto text-center">
<footer>Footer goes here.... </footer>
</div>
</div><!--/END ROW-->
</div><!--/CONTAINER-->
</body>
</html>
My work is done here.
In fact, this can all be achieved with FAR LESS CODE than what the OP has going on now.
By @Nancy OShea
Or even less:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Even Less Code</title>
<style>
.row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
grid-gap: 20px;
width: 90%;
margin: 0 auto;
}
.responsive-iframe {
aspect-ratio: 16 / 9;
width: 100%;
}
</style>
</head>
<body>
<div class="row">
<iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
<iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
<iframe class="responsive-iframe" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</body>
</html>
What a pathetic effort
https://app.screencast.com/cv0FzVQxAAOje
In comparison
https://app.screencast.com/lcZUPSGo4pv1v
By @BenPleysier
Sorry I don't do screencasts on account they want to load cookies onto my system which l object to and you should not post knowing that, so you will need to explain if you require a response?
Am I correct in thinking DW still only offers v4 by default and never introduced v5?
By @osgood_
Yes, I would expect that Dreamweaver would have an update that would include Bootstrap 5.
Mostly, when I make changes in a html-document and I press 'save all' I get the message that I made changes in the bootstrap css code, which I'm not aware of! I'm pressed to save changes for a file that cannot be overwritten.
Guess I have to donwload Bootstrap 5 manually.
By @osgood_
Yes, I would expect that Dreamweaver would have an update that would include Bootstrap 5.
By @edinav24550678
I doubt it. DW as far as I know is now only getting bug updates and OS fixes, no new features are planned so I doubt Bootstrap v5 will make it.
Mostly, when I make changes in a html-document and I press 'save all' I get the message that I made changes in the bootstrap css code, which I'm not aware of! I'm pressed to save changes for a file that cannot be overwritten.
By @edinav24550678
I'm not a DW user anymore and have never been a Bootstrap advocate so I'm not sure whats happening there.
Guess I have to donwload Bootstrap 5 manually.
By @edinav24550678
Well either that or link directly to the cdn hosted version. Many just link to the cdn hosted version because it might be faster to download, being as though its files are bloated full of redundancy, you'll likely never use a lot of it.
Dear Nancy,
All good and well, but can you tell me how to add Bootstrap 5 to DW? Yes, I know I'm among DW haters here, but it's the program I'm using right now to build my website.
Regards,
Edina
By @edinav24550678
I would highly recommend that you use a cdn hosted version , which you can locate by googling for Bootstrap 5 cdn. Copy the links to the cdn css and javascript which can be found on the cdn page, make code snippets of them in DW. Then you'll have ready made snippets each time you want to add links to the files in your pages.
Obviously there are some significant changes from v4 to v5 so you probably won't be able to use the pre defined Bootstrap components that ship with the current version of DW.
If you want components you will have to go grab them from the Bootstrap 5 website. You can also turn these into snippets of code in DW for ease of use should you need to deploy the same component again, rather than keep having to go to the Bootstrap 5 website.
Some people here have shown their anti's against Wappler because it has its own framework called App Connect. In fact, App Connect is available as a free extension for Dreamweaver.
By @BenPleysier
It's not a question of being anti anything it's a question of providing a balanced view and exposing the truth which some like to completely overlook.
The editor you use for instance can cost far more than other editors or DW, which is part of a bigger package if you have a creative cloud subscription. Value for money, that's up to each individual to decide based on their consumption.
Because the editor you recommend has its own niche workflow, which shall we say is not as readily recognised amongst main stream web developers like say Vue, React, Angular would be, as l know the terminology industry standard some what confuses you, it may be problematical to maintain the website should you wish to unsubscribe at anytime due to reliance on its own internal workflow, just like you mention above in reference to DWs templating system which is unique to DW, you may find it to be an issue going forward, or you may not.
I'm not trying to dress anything up like some do.
It's not a question of being anti anything it's a question of providing a balanced view and exposing the truth which some like to overlook.
By @osgood_
I'm all for that
The editor you use for instance can cost far more than other editors or DW, which is part of a bigger package if you have a creative cloud subscription. Value for money, that's up to each individual to decide based on their consumption.
By @osgood_
A standalone Dreamweaver costs US$21, Wappler US$32. US$11 difference. Yes, it is up to each individual to decide whether to pay for a product that has a deprecated framework and a PHP version with security risks. The individual can also choose to go for a product that is never going to be upgraded.
Because the editor you recommend has its own workflow it might prove difficult to maintain the website should you wish to unsubscribe at anytime, just like you mention above in reference to DWs templating system which is unique to DW, you may find it to be an issue going forward, or you may not.
By @osgood_
Bad example.
- To continue updating the Template without Dreamweaver is impossible. The site has to be completely redone.
- Updating a site created with Wappler is as easy as using VSCode or any other code editor. After all, VSCode and Wappler use the same Monaco text editor. The unique workflow makes Wappler the time saver that I so cherish.
I'm not trying to dress anything up like some do.
By @osgood_
Fortunately I have had an extensive experience with both, Dreamweaver (which I still have on my system) and Wappler (which is my preferred IDE). Can you claim the same?
A standalone Dreamweaver costs US$21, Wappler US$32. US$11 difference. Yes, it is up to each individual to decide whether to pay for a product that has a deprecated framework and a PHP version with security risks.
That depends on location, the pro version is 49 dollars a month in the UK. Is it worth it, yes, if youre a heavy user, we'll worth it, if your code skills are limited, yes, it's worth every penny considering what's included. If your not a heavy user then it might be a different story, which is why l like to be open about it, rather than concealing the truth. If youre not intending to take advantage of all the bells and whistles included another approach may be more suitable.
By @BenPleysier
- Updating a site created with Wappler is as easy as using VSCode or any other code editor. After all, VSCode and Wappler use the same Monaco text editor. The unique workflow makes Wappler the time saver that I so cherish.
That's not the opinion of some of your friends over at the Wap forum, they openly say it may be an issue due to its niche workflow.
I
Fortunately I have had an extensive experience with both, Dreamweaver (which I still have on my system) and Wappler (which is my preferred IDE). Can you claim the same?
By @BenPleysier
No, l have no experience of using Wap but l have a lot of experience in general coding to make a balanced judgement and form an opinion based on the information available.
That's not the opinion of some of your friends over at the Wap forum, they openly say it may be an issue due to its niche workflow.
By @osgood_
Please name two of my `friends` who make the claim.
I prefer the view of an expert.
That's not the opinion of some of your friends over at the Wap forum, they openly say it may be an issue due to its niche workflow.
By @osgood_
Please name two of my `friends` who make the claim.
By @BenPleysier
Have a look through some of the past posts on the forum. I was quite pleasantly surprised with the honesty shown to be frank.
Here yah go, from sub named 'Apple':
<quote>'The “average dev” will have to use Wappler to modify your app, despite the source-code being open-source. The reason for this is because Wappler apps have to be structured in a certain way so that it’s easy to be read by the Wappler editor program (commonly referred as Wappler UI), such structure is not easily read at the naked eye (script steps are stored as JSON). But, you can always see the source-code, so if something happens to Wappler you do have complete control over your app.</quote>
Question:
So isn’t it a potential constraint to scalability if the devs have to learn to master wappler to take over the code?
Answer:
You may as well just hire someone from here on the Wappler forums, so they don’t have to learn Wappler as they’ve already learned
@BenPleysier wrote:
I prefer the view of an expert.
Sure you can continue to use App Connect and Server Connect but you have no access to the interface to use them, which I'm guessing is a big reason for buying into Wap in the first instance.
Sure you can continue to use App Connect and Server Connect but you have no access to the interface to use them, which I'm guessing is a big reason for buying into Wap in the first instance.
By @osgood_
As I have constantly stated, the interface is the reason why I am so attracted to Wappler. It is a huge time saver. I would dare say that it cuts my development time down to 25%. Imagine, a month's worth of work using Dreamweaver cut down to a week.
As I have constantly stated, the interface is the reason why I am so attracted to Wappler. It is a huge time saver. I would dare say that it cuts my development time down to 25%. Imagine, a month's worth of work using Dreamweaver cut down to a week.
By @BenPleysier
I'm not doubting what you are saying. I'm saying WITHOUT IT it might be problematical IF someone then decides to unsubscribe AFTER building their website or app, yet still want to manage the website or app and cant afford to subscribe to gain access to the UI.
That depends on location, the pro version is 49 dollars a month in the UK.
By @osgood_
And here I am to believe that we need to give a balanced view?
Wappler Pro at $49 a month in the UK is the equivalent to Dreamweaver plus all of the DMXzone extensions. This equates to $21 + $98 = $119
That depends on location, the pro version is 49 dollars a month in the UK.
By @osgood_
And here I am to believe that we need to give a balanced view?
Wappler Pro at $49 a month in the UK is the equivalent to Dreamweaver plus all of the DMXzone extensions. This equates to $21 + $98 = $119
By @BenPleysier
Yup I gave a balanced view, I think about the price - saying £49 dollars a month is well worth it based on usage consumption, ability and objectives. I have nothing but praise for George and his teams hard work but I don't necessarily have to like the direction it takes.
AdChoices