JSFiddle - React, Tailwind, and code Playground
HTML
<div class="col-xs-12">
<!-- PAGE CONTENT BEGINS -->
<div class="wrapper_custom" style="margin-bottom:25px;">
<textarea id="iframeBox0" name="iframeBox0" rows="3"><iframe src='http://localhost/secvideo/cms/watch?v=KJSPCC' frameborder='0' style='overflow: hidden; position: absolute;' height='100%' width='100%'></iframe> </textarea>
<div class="controls_custom">
<button onclick="copyToClipboard('iframeBox0')"><i class="fa fa-clipboard" aria-hidden="true"></i> Copy to Clipboard</button>
</div>
</div>
<div class="wrapper_custom" style="margin-bottom:25px;">
<textarea id="iframeBox1" name="iframeBox1" rows="3"><iframe src='http://localhost/secvideo/cms/watch?v=luIwKE' frameborder='0' style='overflow: hidden; position: absolute;' height='100%' width='100%'></iframe> </textarea>
<div class="controls_custom">
<button onclick="copyToClipboard('iframeBox1')"><i class="fa fa-clipboard" aria-hidden="true"></i> Copy to Clipboard</button>
</div>
</div>
<!-- PAGE CONTENT ENDS -->
</div>
JavaScript
window.copyToClipboard = function(elementId) {
// Create a "hidden" input
var aux = document.createElement("input");
// Assign it the value of the specified element
aux.setAttribute("value", document.getElementById(elementId).innerHTML);
// Append it to the body
document.body.appendChild(aux);
// Highlight its content
aux.select();
// Copy the highlighted text
document.execCommand("copy");
// Remove it from the body
document.body.removeChild(aux);
alert("Copied!");
}