2

Here is my embed code: 

<iframe width="1920" height="1080" src="//www.youtube.com/embed/2JkquK7PJ-c?rel=0&color=white&modestbranding=1&showinfo=0&wmode=transparent&autoplay=1" frameborder="0" allowfullscreen></iframe>

And here's how it's showing.

enter image description here

The video upload is 1080p and the poster image was chosen from the video (though I had the same issue with one that was a custom image) so I'm not sure what's missing.

tsdexter
  • 2,911
  • 4
  • 36
  • 59

2 Answers2

0

Try setting the iframe size using css, initially inline like this:

<iframe style="height: 1080px; width: 1980px" src="//www.youtube.com/embed/2JkquK7PJ-c?rel=0&color=white&modestbranding=1&showinfo=0&wmode=transparent&autoplay=1" frameborder="0" allowfullscreen></iframe>

If this works, neaten it up by giving the iframe an id and then add the dimensions as a rule to the external css file.

Playfair
  • 21
  • 3
  • thx - i'll try it for the initial setting - though I forgot to mention I am using fitvids to set the final size automatically. – tsdexter Oct 30 '14 at 14:21
  • no dice. I'm thinking it's a youtube issue since this is an embed... I'm quite certain it was working last week and then suddenly it's smaller (could be wrong though) – tsdexter Oct 30 '14 at 14:24
0

Yes, this appears to be across all YouTube embeds. If it really bugs you, like it does me, I'd suggest showing the thumbnail and then swapping it out on click to the video with autoplay on. I wrote about doing this using jQuery years ago here: start/play embedded (iframe) youtube-video on click of an image

Your thumbnail is avaialble at: http://img.youtube.com/vi/YOURVIDEOID/maxresdefault.jpg

I was tidying up an AngularJS YouTube directive when they made this switch and I spent half an hour trying to figure out what I'd done to create that black border around the thumbnail until I looked around the internet at other embedded videos and noticed that it was YouTube system wide. Heh.

No idea why YouTube decided to do this, it looks horrible.

Community
  • 1
  • 1
gearsandcode
  • 697
  • 6
  • 11
  • Agreed. It looks terrible. And thanks for the suggestion. We do that on other videos and this one we've decided needs a play button and a call to action within the same real estate as the video so I'll do an image overlay with an image map to provide multiple click scenarios. Thanks again. – tsdexter Oct 30 '14 at 14:55
  • 1
    Just a suggestion to your video swap code. It'll be a little cleaner if you put the video id/width/height inside data-id, data-width, data-height attributes of the link, that way you can use declarative markup and never touch the JS for each video. That's how we're doing it. ie: ```$('img.video-poster').on('click', function(){$(this).replaceWith('');});``` – tsdexter Oct 30 '14 at 15:02
  • 1
    apparently they considered it a bug too. It's fixed now. – tsdexter Oct 31 '14 at 15:47