像 youtube 一样设置嵌入 iframe 的/高度答案

【问题标题】：set with/height of embed iframe like youtube像 youtube 一样设置嵌入 iframe 的/高度
【发布时间】：2012-10-27 07:47:38
【问题描述】：

当您从 youtube 嵌入电影时，您有机会更改 iframe 元素的宽度和高度。当您输入所需的值时，您会看到 texarea 内的 html 代码已更改，因此用户只需复制粘贴即可。

你是如何做到这一点的？

这是我尝试过的：

<input type="text" id="width">

<textarea id="code">
    <iframe src="..." width="224" height="144" frameborder="0" id="embed-widget"></iframe>
</textarea>

<script>
$(function() {
    $('#width').keyup(function(){
        var new_width = $(this).val();
        $('#embed-widget').attr('width',new_width);
    });
});

这在 textarea 中不起作用，但完全相同的代码在页面上的 iframe 元素本身上起作用（当我将 id 放在它上面时）

另外，有没有一种简单的方法可以在用户单击文本区域时标记整个文本？

【问题讨论】：

Get YouTube Video dimensions (width/height) 的可能重复项

标签： javascript

【解决方案1】：

文本区域内的 iframe 元素不可访问，它不是真实的，尝试记录 $("#embed-widget")，您将得到一个空数组...。您需要做的是在更改 iframe 元素的宽度后，获取 html 并将 textarea 文本设置为该 html

$("#myiframe").width(new_width);
$("mytexteare").val($("#myiframe").parent().html());// make sure a parent div contains the iframe only

另一种方法是找到“宽度”并替换它，例如使用字符串的子字符串和 indexOf，或者您可以将 iframe 文本作为隐藏输入的值，用 {0} 代替宽度属性，所以你可以随时抓取，并执行替换，然后粘贴到 textarea

【讨论】：