ModDB Assistance required, video background!

HTML & CSS
1

Greetings, I require your assistance, please help me with this issue.

I’m trying to modify my Moddb page for an upcoming modification to run a video as the background, resized to fit into the screen.

The video needs to fully cover the background.
There are a set of rules that need to be followed, moddb staff only allows individuals to use CSS code, no HTML nor JSS.

Things like iframes are allowed for youtube videos, as well as embeds.

i think this means we can only embed a youtube video as the background and resize it appropaitely, however I have no idea on how to approach this.

Please refer to this page for my modification: http://www.moddb.com/mods/medieval-conquests/ and download the page to view its source.

When I emailed moddb they responded with this regarding changing my page: "No, customisation of any kind is allowed because of editing existing CSS code of the page. Not adding new HTML tags or overwriting them with new tags. You have to write CSS code that overwrites the old div. (there are plugins for Chrome and FF that overwrite CSS themes of the visited website)."

I’m inexperienced on doing this, so I need some guidance, please assist me, thank you.

Here is the youtube embed code that I got ready, you have to help me put it in the right place (following the moddb quote) and make sure it works with me.

[CODE] [/CODE]

1 Like
2

Assuming you are allowed to embed that iframe code you are showing then you could use this css to make it full screen.


.myIframe{
 position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(cover-image.jpg) no-repeat;/* add a cover image here*/
    background-size: cover;
}

I used this html:

  <iframe class="myIframe" frameborder="0" height="100%" width="100%" 
    src="https://youtube.com/embed/z9Ul9ccDOqE?version=3&autoplay=1&loop=1&controls=0&showinfo=0&autohide=1&vq=highres">
  </iframe>

All I did was the class of myIframe so you could target it.

If you are not allowed to add a class then it could be difficult to target the iframe as there seems to be a number of iframes on that page. (You’d need to isolate it by its position or reference to some other element assuming its location is unique.)

If you are not allowed to add the iframe (or video tag) html then I think the best you could do is to add a background image to the page.

Perhaps the first thing you should try is to add the iframe code to the page and see what happens.

3

Could you help me understand what to do/where to place it?

I honestly don’t know where to place the class etc.

4

I’ve already added it in the snippet I posted above. Or did you mean something else?

5

What I mean is, I don’t know where/how to place it.
I’m very inexperienced with editing, I think I may need you to spoon feed me by putting it into the website page code and showing me the full code…

6

Hi,

Sorry I know nothing about ModDB and I guess no one else here will have a clue either.

It sounds as though you need to locate a control panel or options panel in your application and enter the css and iframe code into the appropriate input panels. Assuming of course that ModDB allows you to do that.

I suggest you refer to the documentation or help page for ModDB (whatever ModDB is ).

If you can locate the correct panels to enter the code then you can just copy and paste the code I gave you.

7

Here is the CSS Code: http://pastebin.com/0ByR5fkF

I can edit that code, can you show me where to put the code you gave me?

8

I’m not sure what you are showing me as that doesn’t look like a control panel for moddb?

If that is just something you used to show me the CSS then you insert your css anywhere in that code as long as it’s not between some other rule.

e.g.

.myIframe{
 position: fixed;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    width: auto;
    height: auto;
    z-index: -100;
    -ms-transform: translateX(-50%) translateY(-50%);
    -moz-transform: translateX(-50%) translateY(-50%);
    -webkit-transform: translateX(-50%) translateY(-50%);
    transform: translateX(-50%) translateY(-50%);
    background: url(cover-image.jpg) no-repeat;/* add a cover image here if needed*/
    background-size: cover;
}

/* rest of code follows here */
div.normalbox div.table div.row:nth-of-type(2n-1) {
  background-color: transparent;
}

/* etc..... */

However I don’t see where your html is supposed to go as I’m sure you will have a control or options panel somewhere.

9

I too have no experience with ModDB, but I think the very first thing to do would be to get the iframe into the HTML where you want it to be.

Then I would use dev tools to inspect the iframe to see what CSS rules were being applied to it from existing CSS rules.

For any that I found that I wanted to not be applied to the iframe, I would make sure my CSS rules for the iframe explicitly over-rode those rules that I didn’t want, then add the rules that I did want. Finally, I would add my CSS rule-set to the end of the existing CSS.

But as I said. the first step is getting the iframe into the HTML. Until that happens putting together CSS for it is moot.

10

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.