{"id":196,"date":"2010-06-18T12:32:58","date_gmt":"2010-06-18T07:02:58","guid":{"rendered":"http:\/\/vikku.info\/codesnippets\/?p=196"},"modified":"2010-06-18T12:38:37","modified_gmt":"2010-06-18T07:08:37","slug":"show-html-elements-on-top-of-youtube-video-make-youtube-video-wmode-transparent","status":"publish","type":"post","link":"http:\/\/vikku.info\/codesnippets\/php\/show-html-elements-on-top-of-youtube-video-make-youtube-video-wmode-transparent\/","title":{"rendered":"show html elements on top of youtube video &#8211; youtube embed z index &#8211; wmode transparent"},"content":{"rendered":"<p>Assume that you are managing youtube videos in your site admin panel. So they are dynamically displayed in web pages.<br \/>\nYoutube video embed code, as i have seen does not include the option of making the video go behind HTML elements.<br \/>\nWhen we do some animation you can see that the youtube video is on top of all. <\/p>\n<p>So we need to include the wmode transparent option in the embedd code before displaying.<br \/>\nThis attribute(param) will make the youtube video go behing any popups.<\/p>\n<p>Here is the simple code to insert the wmode transparent option into the url before displaying it.<\/p>\n<pre lang='html4strict'>\r\n<div class='youtubevideo'>\r\n<\/pre>\n<pre lang='php'>\r\n$string = $url;\/\/youtube video url from database\r\n$string = str_replace(\"<embed\",\"<param name='wmode' value='transparent'><\/param><embed\",$string);\r\n$string = str_replace(\"<embed\",\"<embed wmode='transparent' \",$string);\r\necho $string;\r\n\r\n<\/pre>\n<pre lang='html4strict'>\r\n<\/div>\r\n<\/pre>\n<p>...<br \/>\n<a href='http:\/\/vikku.info\/codesnippets\/php\/replace-width-and-height-of-html-element-using-regular-expression\/'>How to replace the width and height of an embed code or youtube video<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Assume that you are managing youtube videos in your site admin panel. So they are dynamically displayed in web pages. Youtube video embed code, as i have seen does not include the option of making the video go behind HTML elements. When we do some animation you can see that the youtube video is on [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[5],"tags":[],"_links":{"self":[{"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/posts\/196"}],"collection":[{"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/comments?post=196"}],"version-history":[{"count":3,"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/posts\/196\/revisions"}],"predecessor-version":[{"id":199,"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/posts\/196\/revisions\/199"}],"wp:attachment":[{"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/media?parent=196"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/categories?post=196"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/vikku.info\/codesnippets\/wp-json\/wp\/v2\/tags?post=196"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}