Why YouTube embedded code is not working on any smart phone like Samsung?

Question

I'm using Youtube Embedded code for display my video on my website.to display this video I'm using Jquery plugin and and Youtube embedded code.

Issue My Video can't play or display on Samsung smartphone.

Here is my JS code

$(document).ready(function () {
var first_child = $(".url").first().text();
        $("<iframe id=videos class=" + first_child + " width=701 height=400 src='https://www.youtube.com/embed/" + first_child + "?rel=1&amp;controls=1&amp;showinfo=1' frameborder='0' allowfullscreen></iframe>").appendTo('#video');
        $('ul#vurl li').on('click', function ()
        {
            var newname = $(this).children('span.url').text();
            if ($('#video>iframe').hasClass(first_child)) {

                $('#video').html("");
                $("<iframe class=" + newname + " width=701 height=400 src='https://www.youtube.com/embed/" + newname + "?autoplay=1&rel=1&amp;controls=1&amp;showinfo=1' frameborder='0' allowfullscreen></iframe>").appendTo('#video');
            }
            if ($('#video>iframe').hasClass(newname)) {

                $('#video').html("");
                $("<iframe class=" + newname + " width=701 height=400 src='https://www.youtube.com/embed/" + newname + "?autoplay=1&rel=1&amp;controls=1&amp;showinfo=1' frameborder='0' allowfullscreen></iframe>").appendTo('#video');
            } else {
                $('#video').html("");
                $("<iframe class=" + newname + " width=701 height=400 src='https://www.youtube.com/embed/" + newname + "?autoplay=1&rel=1&amp;controls=1&amp;showinfo=1' frameborder='0' allowfullscreen></iframe>").appendTo('#video');
            }
        }
        );
     });

This is HTMl for result after user click on my video

<div class="wrapper ">
        <div class="bg-gray">
            <div class="col-lg-9">
                <div class="data" id="video"></div>
            </div>
            <div class="col-lg-3">
                <div class="data">
                    <ul id="vurl">

                        <li class="video_title"><a class="no">title </a><span class="url" style="display: none;">T1JbM8Oged0</span></li>
                        <li class="video_title"><a class="no">Kham New MV </a><span class="url" style="display: none;">AfBne0tKMCw</span></li>
                        <li class="video_title"><a class="no">Title</a><span class="url" style="display: none;">0ynW4eg70uA</span></li>
                    </ul> 
                </div>
            </div> 
        </div>
    </div>

Answer 1

You're using an HTML string as the selector. Try using the element ID as selector, and appending the HTML string to it:

$('#video').append("<iframe class=" + newname + " width=701 height=400 src='https://www.youtube.com/embed/" + newname + "?autoplay=1&rel=1&amp;controls=1&amp;showinfo=1' frameborder='0' allowfullscreen></iframe>");