找到youtube iframe并将其替换为自定义代码(Find youtube iframe and replace it with custom code)

我有一个wp网站,在很多帖子中我使用youtube视频嵌入了clasic iframe。 可以在帖子中找到iframe div并用自定义的youtube代码替换它吗? 我想使用下面的代码来控制youtube视频。 它何时启动,何时完成。

我在帖子中的代码是:

<iframe width="824" height="464" src="//www.youtube.com/embed/eEqIBzxHjiA?rel=0" frameborder="0" allowfullscreen></iframe>

我想用以下代替:

<script>

    // create youtube player
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'eEqIBzxHjiA',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }

    // autoplay video
    function onPlayerReady(event) {
        event.target.playVideo();
    }

    // when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) {            
          alert ('FInished');

        }
    }

</script>

感谢你们...


I have a wp site that in a lot of posts i am using youtube videos embeded with the clasic iframe. Is possible to find the iframe div inside post and replace it with a custom youtube code? I want to use the code bellow to control youtube video. When it starts, when it is finished.

The code that i have in my posts is:

<iframe width="824" height="464" src="//www.youtube.com/embed/eEqIBzxHjiA?rel=0" frameborder="0" allowfullscreen></iframe>

And i want to replace it with:

<script>

    // create youtube player
    var player;
    function onYouTubePlayerAPIReady() {
        player = new YT.Player('player', {
          height: '390',
          width: '640',
          videoId: 'eEqIBzxHjiA',
          events: {
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
          }
        });
    }

    // autoplay video
    function onPlayerReady(event) {
        event.target.playVideo();
    }

    // when video ends
    function onPlayerStateChange(event) {        
        if(event.data === 0) {            
          alert ('FInished');

        }
    }

</script>

Thank you guys...

2023-02-06 13:02

满意答案

使用短代码 1. WordPress Rich Editor可能会删除JavaScript src标签,所以最好是编写一个定义短代码的小插件,例如[myyoutube id = eEqIBzxHjiA]并从现在开始使用它。 您可能希望定义一个包含主要代码的javascript .js文件,并将其包含在存在短代码的每个页面中。 因此除了播放器ID之外的所有上述内容都将在您在快捷键代码中定义的包含的.js文件中。 只有playerId才是对javascript函数的调用。

遗产 2.对于所有现有条目:可能最快在数据库帖子表上使用sql命令,并将与上述正则表达式匹配的所有条目替换为新的短代码标记。 (最快的方式)


use shortcodes 1. The WordPress Rich Editor might strip out JavaScript src tags so best is to write a little plugin that defines a shortcode e.g. [myyoutube id=eEqIBzxHjiA] and use that one from now on. Probably you want to define a javascript .js file that holds the main code and include that in each page where the shortcode is present. So all of the above except the player ID will be in the included .js file that you define in the shortcut code. only the playerId is then a call to the javascript function.

legacy 2. For all the existing entries: probably the fastest to use a sql command on the database posts table and replace all entries matching the regex above with the new shortcode tag. (fastest way)

相关问答

更多

Youtube iframe wmode问题(Youtube iframe wmode issue)

尝试添加?wmode=opaque的URL或&wmode=opaque如果已经有一个参数。 如果它不起作用,而&amp;wmode=transparent ,这将在IE浏览器中工作。 Try adding ?wmode=opaque to the URL or &wmode=opaque if there already is a parameter. If it doesn't work try this instead, &amp;wmode=transparent which will wo...

iframe上的youtube无效(youtube on iframe is not working)

检查你的控制台 。 它很可能会有如下消息: 拒绝在一个框架中显示“ https://www.youtube.com/ ”,因为它将“X-Frame-Options”设置为“SAMEORIGIN”。 在此处阅读有关X-Frame-Options的更多信息: X-Frame-Options响应头 X-Frame-Options HTTP响应头可用于指示是否应允许浏览器在<frame> , <iframe>或<object>呈现页面。 站点可以通过确保其内容未嵌入其他站点来使用此功能来避免点击劫持攻击。...

验证/允许YouTube嵌入代码(Validating/Allowing YouTube Embed Code)

你应该允许用户使用这样的东西: [youtube]http://www.youtube.com/watch?v=te-TiL9YVaE[/youtube] 然后在显示消息时使用PHP将其转换为嵌入代码: function bb_youtube($post) { return preg_replace( "#\[youtube].*?v=([^&]+).*?\[/youtube\]#im", ...

到iframe的Youtube网址(Youtube URL to Iframe)

标签的noteType等于1.尝试这样的事情: $('#wiki-page-content').contents().each(function() { // Skip non text nodes. var text; switch (this.nodeType) { case 3: text = this.data; break; case 1: text = th...

找到刚刚使用Youtube API完成播放的Youtube iframe的父div(Find the parent div of the Youtube iframe that just finished playing using Youtube API)

event.target在这里不返回HTML元素(在这种情况下为iframe),它返回播放器对象。 您可以使用event.target.b (以及使用event.target.b.parentNode的div)访问iframe。 请注意:这不是文档的一部分,我正在使用控制台检查event.target的成员。 可能会发生这种情况(通过event.target.b访问)将来会发生变化。 event.target here doesn't return a HTML-element(iframe in...

通过javascript为YouTube流聊天iframe自定义CSS样式(Custom CSS style for YouTube Stream Chat iframe via javascript)

由于安全限制,如果iframe显示来自运行JavaScript的同一域中的内容,则您只能使用JavaScript访问iframe的内容。 否则,什么会阻止黑客在iframe中加载某个网站并在用户尝试登录时窃取用户的登录信息或在他们尝试购买时窃取他们的信用卡号码? Due to security restrictions you can only access the contents of an iframe with JavaScript if the iframe is showing con...

将YouTube观看替换为嵌入视频的