I am using the latest Flowplayer (5.0, which is HTML5 first and foremost... yay!) to play tutorial videos on a private site (so I cannot provide a living sample). I am trying to use the built-in playlist functionality. The formatting is all wonky.
Here is a screen capture of the problem. Note that the red outline is the "flowplayer" area as calculated by the tool. The Windows taskbar and Firefox browser are the video capture itself. The Flowplayer controls are that wee little timeline strip a bit below the video (near the bottom of the "flowplayer" area).
The suggested code from the Flowplayer site is as follows:
<div class="flowplayer">
<!-- initial clip -->
<video>
<source type="video/webm" src="night1/640x360.webm"/>
<source type="video/mp4" src="night1/640x360.mp4"/>
<source type="video/ogg" src="night1/640x360.ogv"/>
</video>
<!-- playlist root -->
<div class="fp-playlist">
<!-- playlist entries so. "trigger" elements -->
</div>
</div>
I am using the included skins... none of them work, but let's say for the sake of argument I am using "functional.css".
The problems:
The control elements are escaping the "video player" zone by a large margin. In other words, that "timeline bar" you can see at the bottom of the area is actually MEANT to be snugged up against the video area.
I finally identified the problem: height of the video area is being set to "100%"; however, this is based on the entire .flowplayer area. Since this area includes the playlist, "100%" is larger than the video itself.
Related, the playlist is above the video instead of below it. This certainly has to do with the absolute positioning used within the .flowplayer area to position controls.
As per point #2, even if the video area is resized, the playlist is positioned such that it gets obscured by the video area.
Here's what I've tried:
If I calculate the desired height and explicitly set it to, for example, 400px instead of 100%, the controls line up properly. This is proof of concept, though, since it's suboptimal. I want to use ratio of some sort (like 100%!) so that it can render in a responsive layout.
As soon as I float elements or otherwise change the approach to layout, I have to update absolutely everything. I can do this, but it's surprising to me that the provided CSS and the provided sample code will not render.
I have looked for conflicts with site CSS; there are none that I can see. This layout seems to be strictly caused by the way the flowplayer elements are nested.
I have moved the playlist outside of .flowplayer; however, it must use that container in the script (and why wouldn't it? It makes perfect sense to do that!) in order to identify and attach events to the playlist.
Anybody every come across this or have any ideas? The end result should be a dynamically-reisizable flowplayer area, with a playlist below it.
Thanks for any insight you might have, or 3rd party skins that might solve the problem. ;-)
Related
Here is the desired outcome I'm looking to achieve by scrolling using react-scroll-parallax.
On Mobile browser
View web browser example here
Description
I want to create a website with the parallax affect shown above. The key elements being a website build in react containing three pages.
While scrolling from Page 1 to Page 2 I want the mobile device mock to start halfway on the screen (as to avoid the other content of page 1), then move to being basically centered.
While scrolling from Page 2 to Page 3, the website and components stick and once again act like a normal website scroll.
Additionally, during the scroll from Page 1 to Page 2, I want the content inside the device mock to scroll as well.
What I tried
For starters I was able to get nearly the affect I wanted by using a div with it's z-index and absolute position set, and parallax on translateY of -50, 125.
<div className={"absolute z-10 w-full"}>
<Parallax translateY={[-50, 125]}></Parallax>
</div>
The problem became however when I wanted to place content inside the div. Having another div within the parallax that also had z-index set seemed to mess with the parallax affect.
Important notes
Content inside device mock
One issue I found that was tricky was trying to place the content inside the device mock. I want a parallax both on the device mock itself, and the content within it.
I'm not entirely sure how I should crop the content inside the device mock.
The device mock svg frame and device mock mask can be found here if you want to give it a try
Device mock svg and mask
I tried imgs with various z-indexes, masking the div with an svg mask, using image backgrounds. Nothing is quite getting the preferred outcome.
Scaling of device mock
I want to make sure this works well on both mobile and browser. With that said I was trying to use margins to scale the device mock but I had a hard time with trying to then correctly get the mask to work for the content within the mock.
I'm not sure if using dedicated width and height sizes would be the ideal way to go, but very open to suggestions! It seems hard to scale the device frame and the mask properly.
Parallax of device and parallax of device content
I want the content inside the device mock to be html so that I can change it more than just an image. That being said the most important feature I want is for both the device and the content inside to have a parallax scroll affect.
Summary
I know this is a bit much for a quick simple stack overflow issue, but I've been trying a lot to get this to work and just can't seem to nail down the little details correctly. I sincerely appreciate all help and suggestions and if there is anything else I can provide please let me know!
The trickier part of the request was blowing up the <svg>, adding new <path /> and <clipPath /> for the color swap inside the phone mock.
Eventually I got it working here. The part linking the clipPath transition to the scroll progress looks like this:
const [y, setY] = React.useState(1739);
const onProgressChange = React.useCallback(
(a) =>
setY(Math.max(Math.min(1739, 1739 - ((a - 0.24) / 0.0018) * 17), 36)),
[setY]
);
const { ref } = useParallax({
translateY: [0, 185],
onProgressChange
});
The 1739 and 36 are max and min values for the translation and they are strictly related to the svg's viewBox. The other values allow tweaking the start, end and speed of animation, with regards to overall scroll progress.
This, together with some CSS, took care of binding the right animations to the correct scroll progress.
Feel free to tweak it some more, especially if you add more markup.
The other thing I wanted was a function activated shortly after scrolling, which would snap the scroll to certain positions. Namely, to the .page elements.
I used gsap's ScrollTrigger plugin for the task, for multiple reasons:
I'm somewhat familiar with it (used it before)
it's performant, light and non-obtrusive (basically quits when it detects another user scroll)
listens to all relevant events (touch, mouse pointer, keyboard) without me having to make sense of them, providing a unified interface.
uses inertia (if you scroll down faster from page 1 it will scroll past page 2, directly to page 3 - other scroll plugins limit you to having to scroll once for each page change)
works well on mobile devices
There are other libs/plugins out there for the task, you don't have to use gsap (although I do think it's awesome). If you end up including it in your project, make sure you comply with their licensing (which is not MIT).
By the way, my first choice for the parallax effect per-se would also be gsap, as their timelines provide a lot of flexibility and options.
Their most advanced stuff is reserved for subscribers, but even if you limit yourself to the free plugins, you're still getting more than from alternative libs/plugins, IMHO.
See it working.
I've been mocking up a landing page in Adobe Illustrator, and I'm about to begin coding it.
Is there a reason I shouldn't just export the whole page as an SVG and use that in lieu of recreating everything in html/css?
The only cons I can think of are:
SEO, as I won't have regular text
(easy enough to just remove text from SVGs and recreate in html)
User interaction (buttons etc)
(same solution as the SEO problem)
Responsiveness with respect to elements repositioning at different viewport sizes.
(trickier; but already mocked up a few different layouts for different device sizes, so i can just serve different versions)
My suspicion is there's something I'm missing, because I haven't been able to find anything online addressing this approach.
Some clarification:
I believe SVG compatibility gets dodgy before IE9 or so, but my product involves a chrome extension, so this isn't a huge concern
my design is Material Design-inspired, so there are a lot of colored divs & the like. this is a good approximation (source):
While the buttons and text would best be handled with HTML/CSS/JS, I'm interested in the reasons that the rest of it (i.e., the image and layout components) can't be handled w/ a single SVG.
How can you add a footer in SVG always at the bottom of the page with dynamic page content?
I think that the main difference is that a SVG is a canvas with fixed height and width, html document has a dynamic-sized window.
I've got a simple four-column card layout (Bootstrap grid), which collapses to a single-column layout on mobile. I want to embed a Facebook post within one of the cards. The problem is that Facebook embedded posts on desktop don't expand/collapse to fill their parent container, as they do on mobile. What I'd like to know is if there is a way around this. My cards are about 270px wide, which is below the 350px minimum width for desktop, according to their docs.
My container is a simple div like so:
<div class="content">
<div class="fb-post" data-href="{{post.facebook_link}}">
<!-- Here is what the embedded post's structure looks like -->
<span>
<iframe>
<!-- Widget lives in here -->
</iframe>
</span>
</div>
</div>
Right now when I embed a post in one of my cards, the post forces the card to expand, which wrecks my layout (see attachment). I'm looking for a way to force the post to fill the parent container either through a CSS/JS solution or tricking the Facebook SDK to thinking that it's on mobile.
I've only come across one other post on this issue, but that person explicitly wanted the mobile version of the post. In my case I don't care if it's the mobile version or desktop version as long as I can get it to fill the parent container. For that reason, this question is not a duplicate.
So far I've tried manipulating the height/width of the iframe and/or its parent span element, but as soon as I adjust those numbers, the changes are undone, since the SDK is setting them dynamically.
One way around this is that worked for me, was to use hidden and visible divs using bootstrap 3 css and adjust data-width in facebook code to suit the container size. I used this on my website here link to page if you want a live example. I understand your using iframe, but this was the only option I could find for my site. I have provided my code here just as a guide to illustrate my point, however you will be able to style it better than me as I a sloppy coder I'm afraid...
https://jsfiddle.net/andydry1/6t5o2n8z/1/
data-adapt-container-width="true" *make sure this is set to true*
data-width="300" *change width to suit extra-small, small and large divs *
This isn't the exact answer for your situation; However it may provide some help :-)
I am still an HTML5 rookie and so far I got something up that's pretty snazzy. I found a template over on HTML5UP which I have been tinkering with, changing the CSS and taking out parts I didn't need, as well as added a couple of things myself.
Now, I wanted to show some images in a gallery, which I have achieved. It works pretty good on mobile too. The other thing I wanted to show, was my YouTube channels playlist, embedded using iframe. On the desktop it looks just fine, but on mobile it breaks the site when viewing the page vertically. I would like to know if there is a way to force the iframe to resize because of a phone screen or if I have to maybe go in another direction with this? (Like using the Video and Audio libraries in JavaScript).
If you can give your code that would be helpful, however I believe this is what you are trying to achieve?
Just give your iframe width a percentage instead of a pixel number. However I recommend you change the height as well, as you can see it looks funny at certain widths.
<iframe width="100%" height="315" src="//www.youtube.com/embed/ep7W89I_V_g" frameborder="0" allowfullscreen></iframe>
I also suggest you read the documentation on media queries.
I have two Flash objects on a webpage (call them A and B), and they overlap so one partially obscures the other. I don't seem to have any control over the z-index, to force B in front of A. Whatever I try, A always 'wins' and stays on the top!
I have read many people's posts about problem with getting HTML to show over the top of Flash...but nothing about when your two overlapping items are both Flash objects.
I have tried various combinations of wmode=opaque/transparent/window
I have tried CSS position:absolute/relative and z-index:0/999
I have tried placing the HTML sections in a different order
The problem is the same in IE and Firefox
I do not want to use jQuery in this case
In my particular situation B must have position:absolute and wmode=transparent, and sit above A. A needs relative positioning and transparency is not required. However, I have been testing without these restrictions, and I still have no control over the overlap. Are some SWFs (ours are adverts sent by clients) created in such a way as to override any code control of z-index?
The reason for this arrangement is that A is a standard banner advert at the top of the page, and B is a 'page curl' effect where a corner peels down from the top right of the page.
Thanks for any advice you can give.
I managed to control the situation for one of my advert banners by getting rid of the <object> tag and just using <embed> on it's own. Then the wmode=opaque trick worked in both IE and Firefox.
However, a different advert SWF did not respond to this change, and still shows above my page curl/corner peel.