• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
0

Responsive video sizing on page

Explorer ,
Dec 22, 2019 Dec 22, 2019

Copy link to clipboard

Copied

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.

TOPICS
Bootstrap

Views

767

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 22, 2019 Dec 22, 2019

Copy link to clipboard

Copied

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.

 

image.png

<!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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 22, 2019 Dec 22, 2019

Copy link to clipboard

Copied

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

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 22, 2019 Dec 22, 2019

Copy link to clipboard

Copied

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 & Moderator
Alt-Web Design & Publishing ~ Web : Print : Graphics : Media

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 23, 2019 Dec 23, 2019

Copy link to clipboard

Copied

Burn that book as soon as it arrives and start learning to code correctly, without the crutch of bloated frameworks. Once you have done that you can then decide if a framework is appropriate. If you dont know how to code without the 'sticking plaster' you do not have the knowledge to make that decision.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 23, 2019 Dec 23, 2019

Copy link to clipboard

Copied

I should add that I am 71 years old, a cancer survivor and 4 years into an
Early Onset Alzheimer's diagnosis. So far, flying RC planes and teaching
myself Dreamweaver and things like Bootstrap are looking to be better
therapy's than my neurologist can come up with so I deo all this with her
blessing.

I suspect the all-knowing coder chastising me here isn't as good as he
thinks he is. I noticed he forgot to close his comments with the tag
I expected.



Best Regards,
Tom

 

[E-mail signature removed by moderator.]

 

 

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 23, 2019 Dec 23, 2019

Copy link to clipboard

Copied

I usually get these kinds of 'negative' comments from Bootstrap users, so no problem.  I expect it from people  in their 'mature' years, who are generally just 'messing' around to fill in time.

 

Anyone who thinks they are good at anything are deluded. Everyone can do better and be better. Personally I'll never be satisfied!

 

But hey a Merry Christmas to you.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 23, 2019 Dec 23, 2019

Copy link to clipboard

Copied

And I just learned that Outlook strips code stuff from messages like when I
tried to use closing tag stuff around "hole". You get the point,, I hope
Best Regards,

Tom

 

[E-mail signature removed by moderator.]

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 23, 2019 Dec 23, 2019

Copy link to clipboard

Copied

LATEST

Please stop spaming the forum with your links to this that and the other website.

It takes one to know one, if that's your point?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 22, 2019 Dec 22, 2019

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 22, 2019 Dec 22, 2019

Copy link to clipboard

Copied

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

 

Have a Merry Christmas

Wappler, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 23, 2019 Dec 23, 2019

Copy link to clipboard

Copied

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

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Community Expert ,
Dec 23, 2019 Dec 23, 2019

Copy link to clipboard

Copied

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, the only real Dreamweaver alternative.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
LEGEND ,
Dec 23, 2019 Dec 23, 2019

Copy link to clipboard

Copied

Rather than the cryptic crap you like to respond with, you'll get nothing but the truth from this wise, if old, brain!

 

Happy Christmas - hope its not too hot for you down there!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Dec 23, 2019 Dec 23, 2019

Copy link to clipboard

Copied

Somebody needs a cookie, and no, not that kind!
Best Regards,

Tom

 

[E-mail signature removed by moderator.]



Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines