View Full Version : Most customizable web platform to divulge video work?


Rafael Lopes
March 17th, 2013, 08:57 AM
Hi guys,

I´m not sure if I´m posting on the right subforum, so MODS, feel free to move it.
I will soon start working on a series of 5min shorts and I was wondering what is the most customizable web platform to divulge video work? I´m not a web designer but I want the freedom to customize where to embed the vimeo videos, the wallpaper, look and feel of the website. It would also be good if it was a well known platform host (tumblr, blogger, I have no idea) that we know won´t be broke by tomorrow.
Other then creating a website I´m also planning on following the usual routine (youtube channel, facebook channel, etc).
Anyway, I´m really new at self promoting, so any tips would actually be welcome.

cheers

Rafa

Sareesh Sudhakaran
March 18th, 2013, 09:17 AM
Why do you want a platform? If your videos are hosted elsewhere you can always embed them or code them directly into html5.

What exactly are you trying to accomplish with this portal?

Chip Gallo
March 18th, 2013, 09:46 AM
It would help to know your budget and what you would like visitors or viewers to be able to do. Should they be able to leave comments, search, vote on videos, etc. Is this going to be one small series or will you have more?

Any idea about monetizing this by charging people to view?

Have you seen any sites that represent the functions you are looking for?

Rafael Lopes
March 18th, 2013, 09:46 AM
I think I might have not been as clear as I thought I was. Other then posting the all episodes on youtube and vimeo (allowing voting and comments), I will also create a channel on facebook, but I would also like to have a dedicated website to converge all this info. It can be a blog or whatever, but I need it to be customizatble so it has the look and feel I want. It doesn´t have to be anything complex, just post the new episode whenever it comes out, have some info...Basically it will just be a place entirely dedicated to the series...you can watch the episodes, find some info about the crew (director, writer, actors, etc), have some links to the facebook channel, maybe have a paypal account where people can make deposits to get the series going (initially there will be 10 episodes).

Sareesh Sudhakaran
March 19th, 2013, 07:00 AM
I think I might have not been as clear as I thought I was. Other then posting the all episodes on youtube and vimeo (allowing voting and comments), I will also create a channel on facebook, but I would also like to have a dedicated website to converge all this info. It can be a blog or whatever, but I need it to be customizatble so it has the look and feel I want. It doesn´t have to be anything complex, just post the new episode whenever it comes out, have some info...Basically it will just be a place entirely dedicated to the series...you can watch the episodes, find some info about the crew (director, writer, actors, etc), have some links to the facebook channel, maybe have a paypal account where people can make deposits to get the series going (initially there will be 10 episodes).

You don't need a platform unless you have a blog or loads of content (1000+). In fact, platforms have limitations that might be detrimental to your goal.

I recommend a simple HTML5+CSS+JS/Jquery site. If you can't afford to design a website, then I recommend Wordpress (.org).

Rafael Lopes
March 19th, 2013, 07:04 AM
I´m sorry, I actually used the word "platform" in the generic sense...as in a "mean", "way", etc.
I´ve been told that Word Press is great for customization.

Dan Eskelson
March 19th, 2013, 09:07 AM
Rafael,

Wordpress is indeed an excellent "platform" for your blog or even a complete business website. There are several good plugins for self-hosted video - or simply embed from Vimeo and YouTube.

Good luck with your project!

Rafael Lopes
March 21st, 2013, 03:49 AM
Guys, I´ve played with Wordpress for a while and most of the customizations I need required me to pay for an upgrade.

I´m making some tests wit Blogger and I´m not finding it hard to get where I want to be, but I´m having trouble applying the changes I make. For instance, I go to "design", "background image", I click over the current image thumbnail, I upload the image I want to use, I click on "done" and then I click on "Apply to blog"...the thumbnail gets updated but the blog background does not! This also happens when I try to change the posts´ letters´ colors and a couple of other settings. In the beginning I thought it could be the browser (I´m using chrome), but I´ve tried on IE and Firefox and it´s the same. I can only change these settings ONE first time each time I choose a different template...which makes me start from scratch.

Any thoughts?

Sareesh Sudhakaran
March 21st, 2013, 08:14 AM
Can you list the customization you want?

E.g. for Wordpress (.org, not .com) there are many free themes. You can add free video players of all kinds, and most of the necessary plug-ins are free.

Rafael Lopes
April 5th, 2013, 02:21 PM
The main change I want to make is to force the jpeg I´ve uploaded as the background to resize along the rest of the blog when you open it in a smaller window or a different resolution (right now it doesn´t do that, so depending on your screen resolution the background will have a layer partially covering it). Here is the blog so you can see what I´m talking about Papos de Mentes (http://paposdementes.blogspot.com.br/)
I´ve also uploaded a jpeg with some other minor changes I´d like to be able to do:
http://www.dvxuser.com/V6/attachment.php?attachmentid=69373&d=1365193170

Sareesh Sudhakaran
April 6th, 2013, 05:41 AM
There is a simple CSS fix for this: How can I resize an image dynamically with CSS as the browser width/height changes? - Stack Overflow (http://stackoverflow.com/questions/4684304/how-can-i-resize-an-image-dynamically-with-css-as-the-browser-width-height-chang)

You can make CSS changes within wordpress. The other easy way is to do it with JS or JQuery. It's not very complicated. On the other hand, it might not behave the same in every browser, but what does?

Wordpress does not limit your use of PHP, HTML or CSS. You can do all of this for free.

Rafael Lopes
April 6th, 2013, 09:08 AM
Sareesh, many thanks for the link. I´ve checked it out and it doens´t seem that difficult of a change to make but when I open the HTML code of my website it´s like I´m reading aramaic :)
Would I be abusing of your kindness if asked you for a big favor and sent you the code via PM for you to tell me where I have to make those changes?

Sareesh Sudhakaran
April 7th, 2013, 06:10 AM
I'll try to help, Rafael, but you have to be patient.

Post the code here, using the 'quote' tags. Others might find it useful, and there might be someone more knowledgeable than me.

The CSS changes need to be made in the CSS file, not the HTML file.

If you have Wordpress installed, go to the Dashboard -> Appearance -> Editor

You'll see on the right-hand side a list of files under 'Templates', mostly PHP and HTML. Below, you should find one or more CSS files (.css), under the heading 'Styles'.

The correct way to do this is create a new .css sheet. Always create new sheets for changes, because if you ever update or change your theme, these will be retained. Don't modify the original files unless you know what you're doing.

Rafael Lopes
April 7th, 2013, 06:16 AM
Sareesh, many thanks! You´re a great sport. I´m doing this via blogger because I´ve been using it for a couple of years and I can associate my profile to as many blogs as I want.
I was trying to post the code in here but it´s way longer than the allowed character limit. Should I upload a TXT with the code somewhere and post the link here?

Sareesh Sudhakaran
April 7th, 2013, 08:41 AM
You don't have to post the entire HTML file! Let's start with one <div> section for an image you want to resize.

Rafael Lopes
April 7th, 2013, 08:52 AM
The only part of the HTML code where I could find the background image is:

background: transparent url(http://2.bp.blogspot.com/-MDNtkHIe0HA/UV6buuMLdEI/AAAAAAAAD1E/VFnct1cXSd8/s0/Website%2BV2.jpg) no-repeat scroll top left;
}
html body .region-inner {
min-width: 0;
max-width: 100%;
width: auto

Sareesh Sudhakaran
April 8th, 2013, 09:40 AM
Rafael, that's CSS, not HTML.

Add this:

#backgroundtest {
position: fixed;
top: 0;
left: 0;
min-width: 100%;
min-height: 100%;
}

Don't remove the background code, just add a /* before it and a */ at the end, like this:

/* background: transparent url(http://2.bp.blogspot.com/-MDNtkHIe0H...bsite%2BV2.jpg) no-repeat scroll top left;*/

Note: You haven't included all the {} brackets in your code, so include them too.

Save the file.

Now, go to the HTML file, which might be index.html or index.php - I don't know how blogger does it. You need to add an image like this:

<body>
<img src="http://2.bp.blogspot.com/-MDNtkHIe0H...bsite%2BV2.jpg" id="backgroundtest" alt="">
.
.
.
rest of code
</body>


The first code creates an id that directs how the image will behave. It is anchored to the top-left, which is exactly how it is currently on your site.
The min-width and min-height = 100% preserves the aspect ratio. You could also play with the max-width: 100% setting, because I'm not sure what it is you're trying to do with the rest of your layout.

Remember, this code resides in your css file, not in your html file.

The second code protects what's already there. If you screw up, just delete what you've written and unquote what was there earlier. Don't make mistakes here!

Don't forget to save the file.

The third code places the image right at the beginning of your html document, and it will behave as instructed by the first code. Try it, and see how it behaves.

Play with min-width, min-height, max-width and max-height, depending on how you want the rest of your site to behave. E.g., if you specify the max-width: 100%, the image will always display as 100%, but then you're not restricting its minimum size.

Some other observations:

The way your site is designed, I don't advise a left anchor for the background image. You should ideally place the background image in the middle of the browser, and the main content will always be centered. Right now, there's a lot of white space on my 1920x1080 monitor, and the content isn't centered.

Unfortunately, my knowledge of blogger is limited, so I can't direct you on how and where to find the right files.

So, here's a workaround:

Make a long and thin image of the green+beige strip, and let it repeat horizontally. Add the heads, primates, and humans (are they filmmakers?) as separate png images anchored according to the main body. This way, you never have to worry about the placement of the images. Simple.

Rafael Lopes
April 8th, 2013, 04:32 PM
Hey Sareesh, many thanks for your support. I´ve been doing some tests and I´ve managed to fix a lot of of what I wanted. At the moment all I want is to center each post: Papos de Mentes (http://paposdementes.blogspot.com.br). If you scroll down you will see that the video is slightly to the left. There is a native option to descrease the box size but not to center it.

Any thoughts?

Sareesh Sudhakaran
April 9th, 2013, 04:19 AM
The most robust way to center is by using <div> and by creating a center class or style with margin-left:auto and margin-right:auto. This works perfectly.

I would make the main content wider though. Today, most computers including smartphones can easily do 1024 px. It would make the videos more imposing and prominent.

I like this version better!