I am coding a mobile version of a website, and the test homepage can be seen at http://titanskateboardtools.com/mobilesite/index-hidden.html
If you scroll down you will see the video. You should try and look at this page on an iPhone 6s if possible. I think the simulator in Chrome, for example, DOES display the playbar.
Basically there is no playbar (control) even though it is not set to be hidden, so I had to modify the thumbnail and mock up a play button. If you touch the thumbnail the video does play, but the controls are not visible. So if you want to pause the video or mute it, the only option is mute your phone. When I touch the video for a split second, I see the video controls. But they disappear and holding my finger down does not keep it visible. I believe it does a quick z-index layer swap or something. Here is the embed code. I'm not a coder in any shape or form so, any fix will have to be very dumbed down. I.e., 'create this file, name it XYZ, paste this into it, stick it in the root' then in the head tag (or whatever) paste this in, changing this part to XYZ'. You get the idea. I can drive a car but don't know how the engine works. My specialty is marketing not coding. I am aware of the concept to assign 2 different z-indexes(ices) but with this div and iframe I have clue where those would go to effect video controls. :)
<script src="https://player.vimeo.com/api/player.js"></script>
<div style="padding:56.25% 0 0 0;position:relative;">
<iframe src="https://player.vimeo.com/video/502246225?controls=true&badge=0&autopause=0&player_id=0&app_id=58479"
name="iframe" frameborder="0" z-index=100 style="position:absolute;top:0;left:0;width:100%;height:100%;"
title="TITAN Skateboard Tools®" allow="autoplay; fullscreen; picture-in-picture" allowfullscreen></iframe>
</div>
Thanks in advance. This is my first post here.
Related
I would like to remove or hide the grey "Page 1/1", etc toolbar that appears when hovering over the image as it is blocking access to some of the links further down. The image is an embed from Google Drive.
I'm no coder but this is what I have so far:
[googleapps domain="drive" dir="file/d/1VK0wQFkxwvAHkLDqa8j0NHIeX3ynoRBB/preview" query="#toolbar=0" width="640" height="500" text-align:center]
Example: https://www.wildeones.com/product-tag/uk-size-m-half/
I think you will need to accept and work around that issue by increasing the frame height so injecting a taller height value it may look like this:-
I have an A-Frame WebVR scene. I am trying to put it in an iframe.
<iframe src="https://aframe.io/aframe/examples/boilerplate/hello-world/"></iframe>
But when I Enter VR, it does not go full screen and render to the VR headset. How can I enable stereoscopic VR in an iframe?
You must set allowvr="yes" on the iframe. If you go to https://aframe.io, you'll see that all the examples are iframed, so you can follow their example.
<iframe allowvr="yes" src="https://aframe.io/aframe/examples/boilerplate/hello-world/"></iframe>
Note that this does not work well for mobile smartphones yet because mobile browsers like iOS Safari do not allow iframe's access to device orientation and device motion sensors. This could be worked around by post messaging device orientation data to the iframe. This is filed at https://github.com/googlevr/webvr-polyfill/issues/173
Only one <a-scene> can exist on a page. Alternatively, we can use an <iframe> with allowfullscreen="yes" and allowvr="yes":
<iframe allowvr="yes" allowfullscreen="yes" src="https://aframe.io/aframe/examples/boilerplate/hello-world/"></iframe>
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 a 16:9 video (1280 × 720 Actual), that I've uploaded to YouTube, and embedded into a WP page, using the HTML5 player embed:
<iframe width="395" height="222" src="//www.youtube.com/embed/XOcDLExisBg?autohide=1&modestbranding=1&showinfo=0&rel=0" frameborder="0" allowfullscreen></iframe>
My embed dimensions are also 16:9 (calculated by YouTube, and verified manually).
When the video plays on the page, I have black borders around three sides:
Does anyone know why that is happening?
Thanks in advance!
ty
I see no way to respond within the rules - sorry - but the answer provided does not account for the fact that this is an issue only viewable in Chrome and that has only been occurring for around 10 days. It is a bug also displayed on Youtube's own pages when viewing Channel Trailers - this is a bug in either Chrome or Youtube. I have reported it with full screenshots and notes to Google.
If you use the following code (no autohide) you will see that the controls autohide anyway, and do not produce the black bar bug. However, the controls are visible on load so it is not as clean a look in terms of a 'poster' but the playback is perfect.
<iframe width="640" height="360" src="//www.youtube.com/embed/YOUTUBE_VIDEO_ID?rel=0&showinfo=0&theme=light&color=white" frameborder="0" ></iframe>
Has to be a bug - this behaviour was not happening just over a week ago.
The autohide=1 parameter causes the player bar to scroll offscreen when it's not being used, but the space is still there reserved for it, it does not resize the video to take over the space it was sitting in. Thus, the black bar area at the bottom is for the hidden player bar, and the side space is for the reduced size of the video.
You either need to take the player bar into account, or stop using autohide=1.
Changing autohide=1 to autohide=0 is doing the job for me. I have no idea why this is working, but for me the player bar is hidden like before. The good thing is, it works on Chrome AND all the other browsers.
I think this bug is from YouTube itself. We might need to change everything back to autohide=1 once they fix it. You still need to change everything, but like you guys mentioned, if you need to fix it because of clients getting annoyed, this could be a short term fix.
Hope it helps!
I have been so frantic with the iframe codes that I didn't check the others.
This works:
<embed width="640" height="360" wmode="window" allowfullscreen="true"
type="application/x-shockwave-flash"
src="http://www.youtube.com/v/YOUTUBE_VIDEO_ID&showsearch=0&fs=1&autohide=1&showinf
o=0&rel=0&autoplay=0&theme=light&color=white&ap=%2526fmt
%3D22"></embed>
So, it's a Youtube/Chrome bug that is only affecting iframe embeds. There may be some stuff in that code you/we don't need - but it works 100% and I'm not spending another second on it!
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. ;-)