HTML5 issue. VB4 changing empty attributes.

[axelfx07]

Hey guys,

I am using 8WR Media LIbrary on my forum. I wanted HTML5 Youtube player, so I updated the cod to use <iframe> and all works fine. However, VB is changing empty allowfullscreen attribute to allowfullscreen="", which disables fullscreen.

I tried almost everything, including adding webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" and adding ?fs=0 to the link, but nothing works.

Here is the code:

<iframe width="<vb:if condition="$media['embed_stream']">100%<vb:else />{vb:var media.svcWidth}</vb:if>" height="{vb:var media.svcHeight}" src="{vb:var media.svcMovie}" frameborder="0" allowfullscreen></iframe>

it turns into:

<iframe width="640" height="385" src="http://www.youtube.com/v/xEXg0hw6uZk?rel=0&showinfo=0"  frameborder="0" allowfullscreen=""/>

Any way to fix this?

Thank you!

[squidsk]

Originally Posted by axelfx07

Hey guys,

I am using 8WR Media LIbrary on my forum. I wanted HTML5 Youtube player, so I updated the cod to use <iframe> and all works fine. However, VB is changing empty allowfullscreen attribute to allowfullscreen="", which disables fullscreen.

I tried almost everything, including adding webkitallowfullscreen="true" mozallowfullscreen="true" allowfullscreen="true" and adding ?fs=0 to the link, but nothing works.

Here is the code:

<iframe width="<vb:if condition="$media['embed_stream']">100%<vb:else />{vb:var media.svcWidth}</vb:if>" height="{vb:var media.svcHeight}" src="{vb:var media.svcMovie}" frameborder="0" allowfullscreen></iframe>

it turns into:

<iframe width="640" height="385" src="http://www.youtube.com/v/xEXg0hw6uZk?rel=0&showinfo=0"  frameborder="0" allowfullscreen=""/>

Any way to fix this?

Thank you!

The attribute allowfullscreen is not a valid attribute for an iframe tag in xhtml, much less html5, further valid xhtml/html5 requires that all attributes have a value, hence why you see the ="". To fix you'll probably need to append the fs=0 to the src for the iframe like:

src="{vb:var media.svcMovie}&fs=0"

[axelfx07]

Originally Posted by squidsk

The attribute allowfullscreen is not a valid attribute for an iframe tag in xhtml, much less html5, further valid xhtml/html5 requires that all attributes have a value, hence why you see the ="". To fix you'll probably need to append the fs=0 to the src for the iframe like:

src="{vb:var media.svcMovie}&fs=0"

Thank you for your reply!
If its not a valid attribute why does youtube puts it there by default?
Default code for embedding a youtube video is:

<iframe width="480" height="360" src="//www.youtube.com/embed/G7SqvJA79bk?rel=0" frameborder="0" allowfullscreen></iframe>

Anyway, I've tried adding &amp;fs=0 before (although fs=0 actually removes the fullscreen button , fs=1 puts it back) and it makes the icon clickable, but nothing happens when you click on it.

This is how it looks with the following src code:

<iframe width="<vb:if condition="$media['embed_stream']">100%<vb:else />{vb:var media.svcWidth}</vb:if>" height="{vb:var media.svcHeight}" src="{vb:var media.svcMovie}&amp;fs=1" frameborder="0"></iframe>

Before click:


After click:


As you can see it simply greys out and is unclickable after 1 click and no fullscreen ofc.

[squidsk]

Originally Posted by axelfx07

Thank you for your reply!
If its not a valid attribute why does youtube puts it there by default?
Default code for embedding a youtube video is:

<iframe width="480" height="360" src="//www.youtube.com/embed/G7SqvJA79bk?rel=0" frameborder="0" allowfullscreen></iframe>

Anyway, I've tried adding &amp;fs=0 before (although fs=0 actually removes the fullscreen button , fs=1 puts it back) and it makes the icon clickable, but nothing happens when you click on it.

This is how it looks with the following src code:

<iframe width="<vb:if condition="$media['embed_stream']">100%<vb:else />{vb:var media.svcWidth}</vb:if>" height="{vb:var media.svcHeight}" src="{vb:var media.svcMovie}&amp;fs=1" frameborder="0"></iframe>

Before click:


After click:


As you can see it simply greys out and is unclickable after 1 click and no fullscreen ofc.

I'm not sure where you're getting the default youtube iframe stuff from, but according to the youtube player api (https://developers.google.com/youtube/player_parameters) that attribute is not used with an iframe, it was used with the old method of embedding a youtube video. Also checkout the link because the link that you've reported as being generated does not seem correct either. The link you posted in the op goes to www.youtube.com/v/ instead of www.youtube.com/embed/

[Digital Jedi]

Default code is:

<iframe width="420" height="315" src="//www.youtube.com/embed/BpqNvskS_kM" frameborder="0" allowfullscreen></iframe>

You don't need &fs1 for the iframe. allowfullscreen, for whatever reason, puts it in there. Supposedly, allowfullscreen will pass validation now.

But yeah, your problem was probably that you were using v instead of embed.