Why isn't video showing on 1920 Breakpoint?

[etcbbu]

Hi all,
Got some work I'm doing on one page of my website:
https://ktravisj.com/about.php
And here's the project .WBS file which only has the one page on it, about.php (which I don't understand why we have to strip-out the masterpages when we post our .WBS files, because the problem(s) we're trying to trouble-shoot when we share .WBS project-files may run up against objects on a referenced masterpage in the for-real project) :
https://ktravisj.com/proj.zip

If you'll notice, if you load that page:

https://ktravisj.com/about.php

in a browser, when you scroll down a little bit on the page, there's a video that's supposed to be showing directly under that static "BBB Award for Excellence 2017 Winner", and it shows on the following Breakpoints for the page:
- 320 pixels
- 768 pixels
- 1024 pixels
- 1366 pixels
But for some reason, on the 1920 Breakpoint, the video isn't showing. Why not? I'm using HTML objects to embed these videos from the popular video platform "Rumble". Even in other pages on my website when I'm using the HTML objects to show videos from Rumble, they all show on the 1920 breakpoint as well as the other breakpoints for those other videos. Not sure why this specific video isn't showing on *just* the 1920 Breakpoint?

[Pablo]

which I don't understand why we have to strip-out the masterpages when we post our .WBS files, because the problem(s) we're trying to trouble-shoot when we share .WBS project-files may run up

Because it will take me a lot of extra work to figure out what you have done if there are multiple pages with content that is not relevant to your question.
If your question is about a video then everything else should be removed from the project.

The video does not work because you have added invalid HTML code to the page.

Code: Select all

<iframe class="rumble" width="970" height="579 src="https://rumble.com/embed/vx4ufu/?pub=11li8a" frameborder="0" allowfullscreen></iframe>

should be

Code: Select all

<iframe class="rumble" width="970" height="579" src="https://rumble.com/embed/vx4ufu/?pub=11li8a" frameborder="0" allowfullscreen></iframe>

Also, there is no need to duplicate the code for each breakpoint.

[etcbbu]

I thought I had to do separate HTML objects each time because it didn't look like rumble videos could allow for Responsive. Are you saying that I *DO* only need one HTML object that will be the same and visible on every Breakpoint..? I can update the code and it will be different on each Breakpoint? I just thought when you do hard-code things, you can't re-size the code Height and Width (which is what the hard-code in this case would be, from Breakpoint-to-Breakpoint) ? Like, I thought the hard-code stays static/absolute across all Breakpoints if you try to change it..?

[Pablo]

You can reuse the same video in all breakpoints.
But you will have to edit the code so it's responsive.

[etcbbu]

Oh wow...I thought, intrinsically, HTML objects had the same absolute code on each Breakpoint.

So essentially, in my situation here; I'll have the same Html object across all 5 breakpoints, but I *will* change that Width and Height value on each one. And it's Responsive in that way?

[Pablo]

Instead of using a different HTML object for each breakpoints, you can use a single HTML for all breakpoints.
In that case, the inline frame should have a variable size (percentages).

[etcbbu]

Never utilized that percentages and relative size and everything, as opposed to just cop/pasting HTML code, and maybe sometimes editing some parameters or values in there; can you school me about the values and how to work them in with that object in the way you are saying? I have zero experience in that and do not know the theory.

[Pablo]

It was just a suggestion. If this is easier for you then you can keep it this way.

[etcbbu]

@Pablo , I am very sorry — I meant to say that I am very eager and interested to utilize that method! I just don't know it and wanted to ask how it works? And I just meant to say I have only a very elementary / rudimentary understanding of our WYSIWYG We Builder Html Objects.

[Pablo]

To make this work you will have to understand the code you have added.
You gave the inline frame a fixed size so that is why the code is not responsive.

Instead, you will need use percentages.

Code: Select all

<iframe class="rumble" width="100%" height="100%" src="https://rumble.com/embed/vx4ufu/?pub=11li8a" frameborder="0" allowfullscreen></iframe>