Video Coding and Linking Pages

To insert my show reel into the landing page, I thought of using a lightbox. But there was a problem, it wouldn't be responsive.

So I searched online and found this software called VideoLightBox. I tried it awhile but the results looked really corny. So I played around abit and looked through other tutorials online.

Playing around with the code, I actually made the site redirect to a full-screened Youtube video.

Good thing:
-  It's full screen and resizes accordingly.

Bad Thing:
-You can click away from the page, you need to press back.

So, I was finding a way for the video to redirect itself back to my page once it finishes playing.
Found this really effective code.

<div id="player"></div>

    <script src="http://www.youtube.com/player_api"></script>

    <script>

        // create youtube player
        var player;
        function onYouTubePlayerAPIReady() {
            player = new YT.Player('player', {
              height: '100%',
              width: 'auto',
              videoId: 'ROmBhg54IjQ',
              events: {
                'onReady': onPlayerReady,
                'onStateChange': onPlayerStateChange
              }
            });
        }

        // autoplay video
        function onPlayerReady(event) {
            event.target.playVideo();
        }

        // when video ends
        function onPlayerStateChange(event) {      
            if(event.data === 0) {        
               window.location = "#";
            }
        }

    </script>

Let's just see how this goes.



LINKING PAGES
As for the page linking, since this program is only on preview mode it only saves css per page.
So, I'm going to have alot of css documents. Hopefully I could reuse those styles. But I do manage to link them though.
It's just that I would have different css's.

I could reuse the Boilerplate.css though, but as for the personal styling on each page, I'd have to save them separately.

CONTENT PAGES
I've tested the content page and I wanted it to look like a book as much as possible. At first I wanted it to be half a page, but figured, the whole page would be better!

Reminder to self:
- Add pages at the bottom!
- Navigation Toolbar
- Icons
- Visual>Text!

EDIT//

REMOVING DIVS IN MOBILE VERSION

I tried deleting the entire div when it comes to the mobile size, but it removes itself from different sizes as well.

Solution: Reset 100% to 0% =D