Skip to main content
N
newwoodworker
Participating Frequently
December 22, 2019
Question

Responsive video sizing on page

  • December 22, 2019
  • 3 replies
  • 1229 views

I am re-doing my sites for better phone compatability and have an issue with responsive video. I can get it on the page, it is responsive, looks great on a phone and tabletop but it fills the entire row on the normal webpage. So far I cannot find how to sie it on the page and float it to one side or the other. As you might suspect I am not your code whiz.... Dreamweaver is helping a ton but this one issue is stopping me.

This topic has been closed for replies.

3 replies

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
December 23, 2019

Since you are using Bootstrap (wise move), Nancy's answer should not be clouded by non Bootstrap answers.

 

Have a Merry Christmas

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
O
osgood_
Legend
December 23, 2019

'Wise move' - lmfao - Bootstrap is so far behind the curve its not believable. No css grid, still uses jQuery - go figure!

Only those who are not code knowledgable use it, or those who push out cheap and cheerful solutions, just for the money or personal projects. No real developer with any sense of having pride in what they produce would use it, unfortunately a lot are not allowed to have any pride in what they produce (the workflow is chosen for them) or just don't care.

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
December 23, 2019

I'd be carefull if I were you, your 'a' has a most important function. Unfortunately the brain does not possess a similar exit.

Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
O
osgood_
Legend
December 22, 2019

Not sure what it is you are doing but it could be simple:

 

https://www.w3schools.com/css/tryit.asp?filename=tryresponsive_video2 

 

If you want the video to be 50% of the width of the screen size for large monitors and 100% for mobile devices then adjust the css as below:

 

video {
width: 50%;
height: auto;
}
@media screen and (max-width: 768px) {
video {
width: 100%;
}
}

Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
December 22, 2019

You need a responsive layout that supports multiple columns on large screens and breaks to a single column on smaller devices.  Personally, I like to use Bootstrap because it does most of the heavy lifting without a lot of manual coding. See working code example below.

 

<!doctype html>
<html lang="en">
<head>
<title>Bootstrap Responsive Video Examples</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">

<!--Bootstrap CSS-->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div class="container">
<div class="row">
<div class="jumbotron">
<h2>Responsive Embed</h2>
<p>Create a responsive video and scale it nicely to the parent element on any viewport.</p>
</div>
</div>
<div class="row">
<div class="col-lg-6">
<h2>Aspect ratio 1:1</h2>
<div class="embed-responsive embed-responsive-1by1">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
<div class="col-lg-6">
<h2>Aspect ratio 4:3</h2>
<div class="embed-responsive embed-responsive-4by3">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</div>
<hr>
<div class="row">
<div class="col-lg-6">
<h2>Aspect ratio 16:9</h2>
<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
<div class="col-lg-6">
<h2>Aspect ratio 21:9</h2>
<div class="embed-responsive embed-responsive-21by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tgbNymZ7vqY"></iframe>
</div>
</div>
</div>
<hr>
<div class="row">
<footer>Footer goes here.... </footer>
</div>
</div>

<!--First jQuery then Popper then Bootstrap JS--> 
<script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script> 

<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script> 

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
</body>
</html>

 

 

 

 

Nancy O'Shea— Product User & Community Expert
    N
    newwoodworkerAuthor
    Participating Frequently
    December 22, 2019

    Thanks!

    I am using bootstrap in Dreamweaver and ordered a book on bootstrap as I
    need that kind of crutch apparently. I am close, to getting it right so
    maybe need to sleep on it and start again fresh tomorrow.

    Best Regards,
    Tom

     

    [Personal info in e-mail signature removed by moderator.]

     

    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    December 22, 2019

    If you can count to 12, Bootstrap is simple.   The 12 box grid is comprised of col classes that add up to 12.  Learning what the utility classes do is important, too, for things like spacing and horizontal centering.

    https://getbootstrap.com/docs/4.0/utilities/spacing/

     

    Nancy O'Shea— Product User & Community Expert
      Terms & ConditionsAccessibility statement
      Using the community Terms of use Privacy Cookie preferences Do not sell or share my personal information ad choicesAdChoices