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>
Related
I have a slideshow in my website that will not scale to the browser.
What happens: When the browser is reduced to 414 px it renders
correctly. When I drag the browser window larger the slideshow image
size remains the same. Refreshing the browser makes it render correctly.
Also during the increase in browser size it's not a smooth transition.
You can see it here. http://comrefhvac.com
Thank you in advance.
RichM
How to fix the issue is a different question, and one that requires that we look at your code. If you simply want to know why, then it's because the styling for the slideshow is dynamically applied via javascript and it looks like the author of the plugin only considered the initial page load and no the window.resize event.
I'm cool with that. Try this, go to my website then take the browser down to 414 px and you will see a gap between the slideshow and the text below. Then refresh the page and it will render as it should. Then maximize the browser and you will see that the slideshow container does not expand to the proper size which is set in my css at 440 x 800 px. Thanks for being honest, hope your head doesn't hurt this AM Jeff. RichM
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!
How to force 480p video quality for iframed Youtube videos?
Sample code:
<iframe width="560" height="315" src="http://www.youtube.com/embed/FqRgAs0SOpU" frameborder="0" allowfullscreen></iframe>
Append the following parameter to the Youtube-URL:
144p: &vq=tiny
240p: &vq=small
360p: &vq=medium
480p: &vq=large
720p: &vq=hd720
For instance:
src="http://www.youtube.com/watch?v=oDOXeO9fAg4"
becomes:
src="http://www.youtube.com/watch?v=oDOXeO9fAg4&vq=large"
You can also use for 1080 hd values:
240p: &vq=small , 360p: &vq=medium , 480p: &vq=large , 720p: &vq=hd720 , &vq=hd1080
I found that as of May, 2012, if you set the frame size so that the minimum pixel area (width • height) is above a certain threshold, it bumps the quality up from 360p to 480p, if you're video is at least 640 x 360.
I've discovered that setting a frame size to 780 x 480 for the embed frame triggers the 480p quality, without distorting the video (scaling up). 640 x 585 also works in this manner. I also used the &hd=1 parameter, but I doubt this has much control if your video is not uploaded in HD (720p or higher).
For instance:
<iframe width="780" height="480" src="http://www.youtube.com/embed/[VIDEO-ID]?rel=0&fs=1&showinfo=0&autohide=1&hd=1"></iframe>
Of course, the drawback is that by setting these static frame dimensions, you will most likely get black bars on the sides or above and below, depending on what you prefer.
If you didn't care about the controls being cut-off, you could go on to use CSS and overflow: hidden to crop the black bars out of the frame, providing you know the exact dimensions of the video.
Hope this helps, and hope the Embed method soon gets discrete quality parameters again one day!
You can use the YouTube JavaScript player API, which has a feature on its own to set playback quality.
player.setPlaybackQuality(suggestedQuality:String):Void
This function sets the suggested video quality for the current video. The function causes the video to reload at its current position in the new quality. If the playback quality does change, it will only change for the video being played. Calling this function does not guarantee that the playback quality will actually change. However, if the playback quality does change, the onPlaybackQualityChange event will fire, and your code should respond to the event rather than the fact that it called the setPlaybackQuality function. [source]
You can use the fmt= parameter and fill the value based on the following table :
http://en.wikipedia.org/wiki/YouTube#Quality_and_codecs
Ex : your URL would become :
http://www.youtube.com/embed/FqRgAs0SOpU?fmt=35
What is the best way to dynamically change the width and height of an HTML5 video within a webpage? The kind of behaviour I'm referring to is the same thing in the intro video of http://flipboard.com/
When the window is resized, the video still takes up 100% of the viewable size (without scrolling). I noticed that the video gets resized to a certain degree, but stops resizing and gets cropped at some point.
What is the best way to get the same behaviour? I want to have a video take up the entire viewable area of the browser without scroll bars. This is only on a desktop/laptop, I am not considering any mobile devices ATM.
What I have in mind right now is to dynamically change the width/height properties of the video to fit the viewable area using javascript, but also set a minimum size such that the video doesn't get distorted. The video can be placed in a container that is always centered, so if the browser gets to a size that is too small, it effectively gets cropped. I'm not sure if this is too long-winded and if there is an easier way.
Thank you.
It looks like they have the css properties of height and width set to 100%. If you use an element inspector like the one built into chrome or firebug for Firefox, you should be able to see exactly how they structured the html/css for the video element as well as the div its nested in. Then, as you said, also set a min-width/min-height property.
Unless I'm misreading your question, it should be that simple. Hope this helps!
you could do it with "Responsive CSS", there are some ways to do that,
you could set the viewport, max-width, min-width, etc.
This link have a nice explanation how to do that : http://kyleschaeffer.com/best-practices/responsive-layouts-using-css-media-queries/