Dear all,
Currently I'm working on a (try-out) page with videos. I have two videos next to each other in an iframe, but I cannot position them properly. I want them evenly divided on the screen, not right next to each other, leaving the right side of the screen emtpy. I've searched the internet for solution and tried several, but nothing worked out properly.
What properties can I add to the iframes besides margin:auto and display:block to center them horizontally in their column? They are responsive.
Here's a screen-image of the page:
Here's the css-code:
iframe {
margin: auto;
display: block;
}
video {
width: 90%;
height: auto;
display: block;
margin-right: auto;
margin-left: auto;
border: thin solid hsla(0,0%,0%,1.00);And the html:
<div class="row main">
<div class="row">
<div class="col-md-6 justify-center">
<div class="embed-responsive embed-responsive-4by3"><iframe class="embed-responsive-item" src="https://www.youtube.com/embed/EBcL7xK7JUQ"></iframe>
</div>
<figcaption>
<p>Presentatie Dickens in de Lage Landen, 4 februari 2012<br>
in Trou moet Blijcken, Haarlem (1)</p>
</figcaption>
</div>
<div class="col-md-6 justify-items-center">
<div class="embed-responsive embed-responsive-4by3"><iframe class="embed-responsive-item" src="https://www.youtube.com/embed/tLB6ryTsQos"></iframe>
</div>
<figcaption>
<p>Presentatie Dickens in de Lage Landen, 4 februari 2012<br>
in Trou moet Blijcken, Haarlem (2)</p>
</figcaption>
</div>
</div>
<div class="row">
<div class="col-md-6">
<video class="embed-responsive-4by3" title="Vertelster" controls="controls" >
<source src="../10.mp4" type="video/mp4">
</video>
<figcaption>
<p>Dit is het bijschrift</p>
</figcaption><br>
</div>
<div class="col-md-6">
<video controls class="embed-responsive-item">
<source src="../10.mp4" type="video/mp4">
</video>
<figcaption>
<p>Dit is het bijschrift</p>
</figcaption><br>
</div>
</div>
</div>
1 Correct answer
...Dear Osgood,
I've applied your code-snippets and the big advantage is the YT-video's aren't so small anymore. Yet they still are not evenly divided over the page, they are justified to the left, leaving a gap at the right side. What properties or class do I havo to add to "iframe' (op perhaps the row-column?) to get the desired result?
By @edinav24550678
It's difficult to know what you are doing or not, can you post the complete pages code plus any custom css you are using other than the default B
39
Replies
That is exactly what I have done as you can see here: wappler-youtube-player - npm (npmjs.com)
By @BenPleysier
Unfortunately I can't see anything there as it's in an npm package. Is the output code different to what you posted above?
Unfortunately I can't see anything there as it's in an npm package. Is the output code different to what you posted above?
By @osgood_
A few subtle differences; basically the same.
Unfortunately I can't see anything there as it's in an npm package. Is the output code different to what you posted above?
By @osgood_
A few subtle differences; basically the same.
By @BenPleysier
OK well I still dont see why all the code is needed to create another video. It could be as simple for the user, just to add a link to the javascript component and then add a custom tag for each video required, changing the 'xyz' to the src file locations.
<product-video
thumbnail="xyz.jpg"
videoUrl="xyzUrl">
</product-video>
Then I guess that you have not watched the video: https://youtu.be/lqZqOapCxiQ
By @BenPleysier
No l don't usually watch tutorial videos that use 'off grid' editors as they can be a bit niche and lm not sure l could benefit from them much without having access to that particular editor.
I assume the original code you posted must be different than what is in the tutorial. Can the tutorial code be replicated here without access to the editor it was engineered with?
No l don't usually watch tutorial videos that use 'off grid' editors as they can be a bit niche and lm not sure l could benefit from them much without having access to that particular editor.
I assume the original code you posted must be different than what is in the tutorial. Can the tutorial code be replicated here without access to the editor it was engineered with?
By @osgood_
I thought that you would be more astute. In that case I will explain how it works.
The component that you refer to is exactly what I have coded albeit as an extension for Wappler. The code that is required looks like
When you asked me if the code was the same as the example that I showed previously, I replied that it was basically the same. I.e., once the JavaScript has done its job.
If want to learn about web components, have a look here or ask me to help you.
No l don't usually watch tutorial videos that use 'off grid' editors as they can be a bit niche and lm not sure l could benefit from them much without having access to that particular editor.
I assume the original code you posted must be different than what is in the tutorial. Can the tutorial code be replicated here without access to the editor it was engineered with?
By @osgood_
I thought that you would be more astute. In that case I will explain how it works.
The component that you refer to is exactly what I have coded albeit as an extension for Wappler. The code that is required looks like
When you asked me if the code was the same as the example that I showed previously, I replied that it was basically the same. I.e., once the JavaScript has done its job.
If want to learn about web components, have a look here or ask me to help you.
By @BenPleysier
The code you originally posted is a code snippet not a component otherwise you would have used a custom tag.
I don't need your help, thanks, l've already built a video player/modal using a component. Twisted words l guess leads to ultimate confusion and obviously a bit of hostility.
I guess your component uses proprietory code which is why you can't fully post it here, right? That's a bit of a shame really as it isolates quite a few developers.
I guess your component uses proprietory code which is why you can't fully post it here, right? That's a bit of a shame really as it isolates quite a few developers.
By @osgood_
Sorry, I thought I had posted the code, you can find it here: https://www.npmjs.com/package/wappler-youtube-player?activeTab=code
Oh, it looks like you did find the code but did not understand it. What a pity.
I guess your component uses proprietory code which is why you can't fully post it here, right? That's a bit of a shame really as it isolates quite a few developers.
By @osgood_
Sorry, I thought I had posted the code, you can find it here: https://www.npmjs.com/package/wappler-youtube-player?activeTab=code
Oh, it looks like you did find the code but did not understand it. What a pity.
By @BenPleysier
So you can't walk us through how to apply these files outside of the editor you created it in is that what you are implying. I'm not expected to understand that code as its not main stream and isn't documented, unless you can point us to that documentation?
What I'm trying to establish and it shouldn't be difficult to provide a yes or no answer is is it beneficial to anyone who doesn't have access to Wap or do you need that editor to deploy it? The only pity comes because you are spending copious amounts of time producing these solutions and very few people are actually getting to use them because of lack of clarity.
Nope, you are not expected to be able to understand vanilla JavaScript, that is why I produced it for you
By @BenPleysier
Geez you are so much on the defensive when l ask questions which are a bit difficult for you to answer. l have never seen javascript code written like that in those files used anywhere before, other than that produced by Wap. If you can point to some tutorials produced outside of your niche proprietory editor that produce vanilla javascript like that?
Nope, you are not expected to be able to understand vanilla JavaScript, that is why I have produced it for you.
Not sure what you mean by mainstream code. Does that mean that when I supply vanilla JavaScript, it should not be taken into account because no one else has produced it? Where is the logic with that.
By @BenPleysier
We always have this debate. I regard main stream as something that uses traditional concepts which are easily recognised, identifiable and open source within the web development industry not some proprietory workflow that is used by a niche market product, where most times you need that product as it requires additional scripts which are not open source for it to work.
Anyhow, this is going nowhere, this is the last that I will say.
By @BenPleysier
Well at least we agree on that. I just thought this was an ideal opportunity since you have been pedaling your video/modal component for a few weeks now to get your solution out there and being used by more than a few select club members but it doesn't look as though it works that way although you still haven't clarified that and l don't know enough about a Wap way solution to say if it's possible or not without the actual editor and any additional script/s it might rely on which aren't open source or ideally shouldn't be used that way.
AdChoices