Skip to main content
newwoodworker
Participating Frequently
Dec 22, 2019 1:03 PM UTC
Question

Responsive video sizing on page

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 is closed to new replies. Start a new post to keep the conversation going.

14 replies

BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
Dec 23, 2019 12:36 AM UTC

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

 

Have a Merry Christmas

Translate
Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
osgood_
Legend
Dec 23, 2019 9:13 AM UTC

'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.

Translate
BenPleysier
Community Expert
BenPleysierCommunity Expert
Community Expert
Dec 23, 2019 9:42 AM UTC

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

Translate
Wappler is the DMXzone-made Dreamweaver replacement and includes the best of their powerful extensions, as well as much more!
osgood_
Legend
Dec 22, 2019 10:14 PM UTC

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%;
}
}

Translate
Nancy OShea
Community Expert
Nancy OSheaCommunity Expert
Community Expert
Dec 22, 2019 8:14 PM UTC

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>

 

 

 

 

Translate
Nancy O'Shea— Product User & Community Expert
    newwoodworkerAuthor
    Participating Frequently
    Dec 22, 2019 8:29 PM UTC

    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.]

     

    Translate
    Nancy OShea
    Community Expert
    Nancy OSheaCommunity Expert
    Community Expert
    Dec 22, 2019 8:45 PM UTC

    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/

     

    Translate
    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