XF 1.5 Youtube - strange occurance in Chrome

Davyc

Well-known member
#1
I'm not sure is this is a BB Code problem or something to do with Chrome:

In Chrome I get this for an embedded YT video: the video plays but looks like a broken link

upload_2017-1-11_20-36-14.png

However, in Firefox I get this:

upload_2017-1-11_20-36-46.png

In Opera I get this:

upload_2017-1-11_20-37-51.png


Any ideas, anyone. I don't like the idea of YT vids looking as though they are a broken link.

With thanks
 

Davyc

Well-known member
#3
Hey Brogan

Apologies for the delay in replying as I went offline.

The embed code is modified as below:

Code:
<div class="responsiveVideoContainer">
    <iframe width="500" height="300" src="https://www.youtube.com/embed/{$id}?rel=0&amp;wmode=opaque" frameborder="0" allowfullscreen></iframe>
</div>
With the added CSS to make the embeds responsive:

Code:
.responsiveVideoContainer
{
    position: relative;
    padding-bottom: 56.25%;
    padding-top: 30px; height: 0; overflow: hidden;
    margin-bottom: 10px;
}

.responsiveVideoContainer iframe
{
    margin-bottom: 10px;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
I should point out that this isn't happening with all embeds in Chrome, just a number of them - there doesn't appear to be any apparent reason as to why seeing as the same video embeds work in FF and Opera, they also work OK in Chrome mobile.

I've embedded one of the problematic videos below and it's showing fine in here on Chrome.

 
Last edited:

Davyc

Well-known member
#4
OK it seems to be a size issue with some videos - I've removed the responsive div and CSS and the videos are showing as above. Again this is only in Chrome, so it must be a Chrome issue.

If you go full screen to watch the video, when it ends you get that greyed washed out image, but not at standard size; weird.

I'll have to leave it as it is without the responsiveness, as there are a lot of people using Chrome - I was a big fan of it at one time, but I've had so many issues with it I use Firefox now; this is just one more issue to add to the list.

;)
 

Chris D

XenForo developer
Staff member
#5
Are you registered at the XF2 demo? Might be worth you testing it there, too. We take a very similar approach to responsive embeds there.
 

Davyc

Well-known member
#6
Have post same video in XF2 works great in Firefox, works fine in Chrome - however, there is a slight difference in the BBcode. I use ?rel=0 in the code to prevent similar videos from showing and there is no way to do a full container sized video in XF2, so it's difficult to say whether it's working correctly or not.
 
Top