How to make responsive (YouTube) frame

Dear friend,
However embedding an Iframe is not good as per SEO. but i will tell you the technique to add responsive Iframe.

1. HTML Code

<div class="embed-player">          
                    <div class="h_iframe">
                       <img class="ratio" src="http://bhojpuritrain.com/ico/loading.png" />
<script>
document.addEventListener("DOMContentLoaded", function(event) {
get_player('<?php echo $_REQUEST['v']?>') //do work
});
                            </script>                    
                    </div>
                    <div class="total_view">Total Views-:
                        <?php echo ($video_details['total_views']+1); ?>
                    </div>
                    <div class="description">
                        <?php echo preg_replace('/[^\x20-\x7E]/', '',$video_details['description']); ?>
                    </div>
                </div>

2. CSS

.h_iframe {
position: relative;
height:auto;
}

.h_iframe .ratio {
display: block;
width: 100%;
height: auto;
}

.h_iframe iframe {
/*position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
*/

width: 100%;
height: 100%;
min-height: 400px;
}

3. JavaScript Code

function get_player(video_id){
window.setTimeout(function(){
$('.h_iframe').html('<iframe src="https://www.youtube.com/embed/'+video_id+'" frameborder="0" allowfullscreen></iframe>');
},1000) // frame will load after one second
}

Download Source Code