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!
Related
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.
I have this site:
http://www.johnseabrook.com/playlists/
The problem is my client wants to show the full playlist (some have up to 15 songs). Right now it's limited to only 8 songs and a max height of 720px per Spotify. Is there a hack around this? I tried changing the Iframe height in pixels and percent to be larger but nothing has worked. Thank you in advance!!!
The way the Spotify Play Button works is that you actually need to increase the width as well, e.g.
<iframe src="https://embed.spotify.com/?uri=spotify:user:1215385803:playlist:1BSFYwDOOQEGCA71QUJJw9" width="720" height="1280" frameborder="0"></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'm having an extremely strange issue with an HTML that has 3 videos on it. I'm using videojs for the videos, and all videos have been converted to three different formats to ensure cross-browser compat.
Having said that, when the videos are played, strange black lines appear on the bottom, or on the right of the videos (This even changes across browsers!!).
I have absolutely no clue where this lines come from, as they don't appear on CSS at all.
Here's the link to show you what I'm talking about:
http://tomascamusso.com/helpme
PS: In case it has become a part of the video itself, is there any common software to edit these videos?
Thanks!
The line is in the background image which the video is overlayed on.
http://tomascamusso.com/helpme/img/hang_on_to_your_assets.png
Now I see the image is hidden when the video is played (display: none;). However it does look like the end of the video the still image from the feed was using the same background image.. worth looking into.
- here is a screenshot.
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. ;-)