I am using a video sharing script called cumulusclips which uses videojs. I wanted to add a theater button which is as close to youtubes expanding theater mode as I am going to be able to get for a non-coder. So I would like to ask the general steps I need to take as some of them are not clear enough to me.
you could give us a link to your project and its source code and a link to the documentation you’re using to try to figure out your problem and tell us which steps you’ve tried and which are most confusing to you (if you’re following along with some tutorial or documentation).
Thanks alot for your help I really appreciate it I will put together the info and get back to you.
Ok I will start from the beginning.
I wanted to make a youtube like site to act as a video archive for my website. Originally I was going to use youphptube but the dev does not seem to understand the way I explain things. So I had to move to something not so great called Cumulusclips which uses videojs and .phtml for template files. Since I lack the knowledge I wanted to come here ask if there was a step in the right direction I could take to installing one of the videojs plugins called theater mode.
And that’s where I am currently in this point in time. I would have gone to their forum but there is only one person there. And they can only do so much. Again I appreciate any help at all and thanks for your time.
youphptube wants to charge you $20 to add the ability to switch between different video resolutions? WTF?
Tell me why you need youphptube or cumulusclips instead of just uploading to youtube/vimeo/other for free or cheap? Are you trying to start your own porn website where people can upload their own videos or something?
“Theatre mode” on youtube is just changing the width of the <div> containing the video player to be 100% wide (and maybe also moving it up 1 level in the DOM tree). That is like 5 lines of jquery code (or 11 lines of plain javascript code) to do that.
I doubt anyone here has experience with the ecosystems of the 2 products you mention. You are better off asking for help directly from their communities/creators/sellers.
Thanks for replying. Yes I also use youtube,but I could not find what I needed for wordpress so I had to find the next best thing that would work for me. Please remember that not everyone is going to just use youtube they mite also have a video section on there website as well. Again thanks for your help.
I have had clients who backup videos to their web server but still it was better and easier to also upload those photos to Google Photos and from there import them over to their youtube and vimeo accounts and just embed the videos from there.
Making a button labeled “theatre mode” and writing some JS to resize the div containing the video player is like a $10 or less job you can get somone on fivver to write for you.
I don’t have the money.
Then learn to code? 
If you have a link you can share so we can see what you are trying to add “theatre mode” to it would help us to help you.
I am going to learn php and javascript I found a few free courses on udemy and alison so I am hoping that will help some. The other script I have is called cumulusclips. it uses .phtml files with what looks like js files added to the top I will insert the code that uses the videojs player.
Here is the top of the file with the js and css files:
<?php
if ($playlist) $this->addBodyClass('is-playlist');
$this->addMeta('videoId', $video->videoId);
$this->addMeta('theme', $this->options->themeUrl);
$this->addMeta('loggedIn', (boolean) $loggedInUser);
$this->addCss('video-js.css');
$this->addCss('scrollbar.css');
$this->addJs('video.plugin.js');
$this->addJs('scrollbar.js');
$this->setLayout('full');
?>
and the video player portion
<?php if ($video->gated && !$loggedInUser): ?>
<div id="player-gated">
<img width="750" height="420" src="<?=$config->thumbUrl?>/<?=$video->filename?>.jpg" alt="" />
<div>
<p><?=Language::getText('gated_video')?></p>
<a href="<?=BASE_URL?>/login/" class="button_small"><?=Language::getText('login')?></a>
<?php if ($config->enableRegistrations): ?>
<a href="<?=BASE_URL?>/register/" class="button_small"><?=Language::getText('register')?></a>
<?php endif; ?>
</div>
</div>
<?php else: ?>
<div class="video-player-container">
<video id="video-player" class="video-js vjs-default-skin vjs-16-9" data-setup='{ "controls": true, "autoplay": true, "preload": "auto" }' width="750" height="420" poster="<?=$config->thumbUrl?>/<?=$video->filename?>.jpg">
<source src="<?=$config->h264Url?>/<?=$video->filename?>.mp4" type="video/mp4" />
<?php if ($webmEncodingEnabled): ?>
<source src="<?=$config->webmUrl?>/<?=$video->filename?>.webm" type="video/webm" />
<?php endif; ?>
<?php if ($theoraEncodingEnabled): ?>
<source src="<?=$config->theoraUrl?>/<?=$video->filename?>.ogg" type="video/ogg" />
<?php endif; ?>
</video>
</div>
<?php endif; ?>
<!-- END Video Player -->
If possible I will be looking to adding hls to videojs if possible to hide the video source url which shows.
PS are you a halo fan ?
Thanks again for the helping a noobie.
Halo? I’ve never owned a console so I’ve only played the first Halo on PC
If you can show me an actual live website somewhere running the code (it doesn’t matter how unfinished and rough it is) I might be able to figure out a small amount of JS you can add to the existing page that would give you a half-assed but good-enough “theatre mode” button. Showing me this php code doesn’t really help me do that.
You can’t really hide the video source. The dev tools in the web browser always expose the video source url. If you have a special server for serving video it can be configured to break the videos up into data blob chunks so that there is no url that someone can use to download a single entire working video file (but often there are ways around that as well, they just require a little more techno-knowledge).
Sorry that did not help very much.I have downloaded the files for videojs’s plugin I just don’t understand the rest.
I really appreciate the help I know not everyone is willing to go this far.
https://www.gamerzextreme.com/tv/
PS If you ever want to play halo let me know.
I assume you added this part:
<script>
var player = videojs('my-video');
player.theaterMode({ elementToToggle: 'video-player', className: 'theater-mode' });
player.on('theaterMode', function(elm, data) {
if (data.theaterModeIsOn) {
// do something
} else {
// do something else
}
});
</script><div class="video-player-container">
I assume is created by some of that PHP code which spits out some JS code which creates some DOM nodes that are the video player itself and some divs that wrap it (which use some css to make it resonsive and resizeable while maintining the right aspect ratio).
The “video-player-container” div is inside of a page layout div with class=“col-md-8 play-left”. That div is one of 2 things limiting the width of the video player.
You could make a custom <button> (or any thing really) and put a click event function on it that does the following:
Move div.video-player-container up one level in the DOM to no longer be a child element of div.col-md-8 play-left
Add style attributes to div.video-player-container that cancel out the width and height defined for it in the responsive.css file.
The result of those DOM and CSS changes looks like this: https://i.imgur.com/TCwCxCo.png
(for some reason this forum distorts the image. click the link to see it properly)
And then of course set the same button to do the opposite of all that when clicked again. You’ll probably have to be satisfied with the button not being a part of the actual video player controls unless they happen to have good documentation on how to customize their custom player controls.
No I was unable to figure out where in the file to add the above code to.
PS I hope its alright to come here in the future for help maybe not about something this complex but still I appreciate your help none the less.