IE11 Floating Menu Fix For Over lapping Embedded Youtube

kperrow — Mon, 07 Jul 2014 02:06:15 +0000
Hi,
Thought I would share. I found a small bug with youtube and floating menu ( blodial wp ). If you have a youtube video on your website on IE11 the video appears over the floating menu not under it. By adding below code to the top of the function.php file it fixes the issues…
function add_video_wmode_transparent($html, $url, $attr) {

	if ( strpos( $html, "<param name="wmode" value="opaque"></param></div>
			<div class="crayon-main" style="">
				<table class="crayon-table">
					<tr class="crayon-row">
				<td class="crayon-nums " data-settings="show">
					<div class="crayon-nums-content" style="font-size: 12px !important; line-height: 15px !important;"><div class="crayon-num" data-line="crayon-664832615ab46256721909-1">1</div><div class="crayon-num crayon-striped-num" data-line="crayon-664832615ab46256721909-2">2</div><div class="crayon-num" data-line="crayon-664832615ab46256721909-3">3</div><div class="crayon-num crayon-striped-num" data-line="crayon-664832615ab46256721909-4">4</div><div class="crayon-num" data-line="crayon-664832615ab46256721909-5">5</div><div class="crayon-num crayon-striped-num" data-line="crayon-664832615ab46256721909-6">6</div><div class="crayon-num" data-line="crayon-664832615ab46256721909-7">7</div><div class="crayon-num crayon-striped-num" data-line="crayon-664832615ab46256721909-8">8</div><div class="crayon-num" data-line="crayon-664832615ab46256721909-9">9</div><div class="crayon-num crayon-striped-num" data-line="crayon-664832615ab46256721909-10">10</div></div>
				</td>
						<td class="crayon-code"><div class="crayon-pre" style="font-size: 12px !important; line-height: 15px !important; -moz-tab-size:4; -o-tab-size:4; -webkit-tab-size:4; tab-size:4;"><div class="crayon-line" id="crayon-664832615ab46256721909-1"><span class="crayon-t">function</span><span class="crayon-h"> </span><span class="crayon-e">add_video_wmode_transparent</span><span class="crayon-sy">(</span><span class="crayon-sy">$</span><span class="crayon-i">html</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">url</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">attr</span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">{</span></div><div class="crayon-line crayon-striped-line" id="crayon-664832615ab46256721909-2"> </div><div class="crayon-line" id="crayon-664832615ab46256721909-3"><span class="crayon-h">	</span><span class="crayon-st">if</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-e">strpos</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">html</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">"<span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">!</span>==<span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-664832615ab46256721909-4"><span class="crayon-h">	   </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-e">str_replace</span><span class="crayon-sy">(</span><span class="crayon-s">'</param><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'</param><param name="wmode" value="opaque"></param><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">html</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-664832615ab46256721909-5"><span class="crayon-h">	</span><span class="crayon-st">elseif</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-e">strpos</span><span class="crayon-h"> </span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">html</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'feature=oembed'</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-h"> </span><span class="crayon-sy">!</span>==<span class="crayon-h"> </span><span class="crayon-t">false</span><span class="crayon-h"> </span><span class="crayon-sy">)</span></div><div class="crayon-line crayon-striped-line" id="crayon-664832615ab46256721909-6"><span class="crayon-h">	   </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-e">str_replace</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'feature=oembed'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'feature=oembed&wmode=opaque'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">html</span><span class="crayon-h"> </span><span class="crayon-sy">)</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-664832615ab46256721909-7"><span class="crayon-h">	</span><span class="crayon-st">else</span></div><div class="crayon-line crayon-striped-line" id="crayon-664832615ab46256721909-8"><span class="crayon-h">	   </span><span class="crayon-sy">{</span><span class="crayon-h"> </span><span class="crayon-st">return</span><span class="crayon-h"> </span><span class="crayon-sy">$</span><span class="crayon-i">html</span><span class="crayon-sy">;</span><span class="crayon-h"> </span><span class="crayon-sy">}</span></div><div class="crayon-line" id="crayon-664832615ab46256721909-9"><span class="crayon-sy">}</span></div><div class="crayon-line crayon-striped-line" id="crayon-664832615ab46256721909-10"><span class="crayon-e">add_filter</span><span class="crayon-sy">(</span><span class="crayon-h"> </span><span class="crayon-s">'embed_oembed_html'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-s">'add_video_wmode_transparent'</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">10</span><span class="crayon-sy">,</span><span class="crayon-h"> </span><span class="crayon-cn">3</span><span class="crayon-sy">)</span><span class="crayon-sy">;</span></div></div></td>
					</tr>
				</table>
			</div>
		</div>
<!-- [Format Time: 0.0012 seconds] -->

						
</article>
<article>
<h1>Reply To: IE11 Floating Menu Fix For Over lapping Embedded Youtube</h1>
<p>IshYoBoy — Mon, 07 Jul 2014 17:31:17 +0000</p>

						<p>Hi kperrow,<br />
thank you very much for your feedback and the fix. Unfortunately we haven’t been able to reproduce problem you mentioned. COuld you please let us know what exactly you mean by “floating menu”? Maybe preview link would be good ;)</p>
<p>Thanks in advance<br />
IshYoBoy</p>
<p class="ish-signature">A 5 star rating is always a great motivation for us if you are happy with our theme or support!<br />
<a href="https://bit.ly/iyb-tf" rel="nofollow">Themeforest</a> | <a href="https://bit.ly/iyb-mm" rel="nofollow">MojoMarketplace</a> | <a href="https://bit.ly/iyb-cm" rel="nofollow">Creative Market</a></p>
						
</article>
<article>
<h1>Reply To: IE11 Floating Menu Fix For Over lapping Embedded Youtube</h1>
<p>kperrow — Tue, 08 Jul 2014 03:11:02 +0000</p>

						<p>I have emailed you with code and without code applied to functions.php page. The one image shows the videos over the floating menu ( no code ) and the other shows under the menu ( with code ) – this is only a IE11 issue, I’m not sure if it effects older versions of IE as I haven’t tested it on older versions. I have tested it on Opera, chrome, safari and Firefox and they work fine with and without the code. </p>
<p>Any further info let me know. – the site I am using is still in development stages so its not live as yet. – but really enjoy this theme. – Will rate once complete – thx!</p>
						
</article>
<article>
<h1>Reply To: IE11 Floating Menu Fix For Over lapping Embedded Youtube</h1>
<p>IshYoBoy — Tue, 08 Jul 2014 08:31:27 +0000</p>

						<p>Hi There!</p>
<p>Perfect! Thank you very much for your time. You are right and also the fix you provided seems to be the best one.</p>
<p>It’s already scheduled for the next theme update ;) Thanks for making Boldial better!</p>
<p>Cheers</p>
<p class="ish-signature">A 5 star rating is always a great motivation for us if you are happy with our theme or support!<br />
<a href="https://bit.ly/iyb-tf" rel="nofollow">Themeforest</a> | <a href="https://bit.ly/iyb-mm" rel="nofollow">MojoMarketplace</a> | <a href="https://bit.ly/iyb-cm" rel="nofollow">Creative Market</a></p>
						
</article>
</main></body></html>
Support ForumIE11 Floating Menu Fix For Over lapping Embedded Youtube – Support Forum

IE11 Floating Menu Fix For Over lapping Embedded Youtube
