Getting Youtube.Com to Load in Iframe

Getting youtube.com to load in iFrame

Youtube does not allow embedding. Only http://www.youtube.com/embed/* is allowed, which is for HTML5 videos.

My YouTube video wont show in iframe

YouTube doesn't allow 3rd parties to embed their site directly like that. Using

<iframe width="640" height="360" src="https://www.youtube.com/watch?v=ZwKhufmMxko">
</iframe>

will raise an error Refused to display 'https://www.youtube.com/watch?v=ZwKhufmMxko' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'. to indicate this (you should really check the console for these things).

Fortunately Youtube offers the "embed video" option, which you need to use in order to embed videos.

Your linked video for example would produce the iframe code:

<iframe width="560" height="315" src="https://www.youtube.com/embed/ZwKhufmMxko" frameborder="0" allowfullscreen></iframe>

Insert YouTube iframe after the page is loaded

How can I insert the iframe in page and use the same function I use as
it was loaded from the beginning. ?

If i understand correctly, you want to do that because some videos ID on the url may be false and the player iframe will not play the video.

Well you don't need insert a frame just because a video ID exist when use click on a related videoo the bottom, use onError parameter from YouTube Player API.

This event fires if an error occurs in the player. The API will pass
an event object to the event listener function. That object's data
property will specify an integer that identifies the type of error
that occurred. ...

If the videoID on the url doesn't exist an error will be send. Just hide the player for example and show it when the user click on a related video on the bottom.

With this solution you only need to load the player one and only one time without insert a frame into the code even if the id is wrong. A sample solution.

I made you a little example with a wrong videoID :

HTML

<!DOCTYPE html>
<html>
<head>
<script src="//code.jquery.com/jquery-2.1.1.min.js"></script>
  <meta charset="utf-8">
  <title>JS Bin</title>
</head>
<body>
  <div id="player"></div>
</body>
</html>

Javascript

var tag = document.createElement('script');

tag.src = "https://www.youtube.com/iframe_api";
var firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

// 3. This function creates an <iframe> (and YouTube player)
//    after the API code downloads.
var player;

function onYouTubeIframeAPIReady() {
    player = new YT.Player('player', {
        height: '390',
        width: '640',
        videoId: 'l-gQLqv9f4',
        events: {
            'onError': onPlayerError,
            'onReady': onPlayerReady,
            'onStateChange': onPlayerStateChange
        }
    });
}

// 4. The API will call this function when the video player is ready.
function onPlayerReady(event) {
    $('#player').show();
    event.target.playVideo();
}

// 5. The API calls this function when the player's state changes.

function onPlayerStateChange(event) {
    if (event.data == YT.PlayerState.PLAYING) {
    }
}

function stopVideo() {
    player.stopVideo();
}

function onPlayerError() {
  console.log("error on the video id. Iframe is hiding");
  $('#player').hide(); //or do what you want

}

Live demo: http://jsbin.com/mihikiqoma/1/edit?html,js,output

Is there a way to load a YouTube iframe only after the contents have fully loaded?

You could probably do something like

var loadedIframes = 0, onIframeLoad;
onIframeLoad = function() {
  loadedIframes++;
  if (jQuery("iframe").size() === loadedIframes) { //Once all iframes are loaded, you show/hide loader and iframes
    // Hides the loading icon/text
    $(".social-loading-youtube").hide();
    // Displays the videos, which start out as display: none.
    $("#carousel-videos").css("display", "block");
  }
}
jQuery('iframe').on("load", onIframeLoad);
function getYTVideos() {

    var yTUrlPart = "http://www.youtube.com/embed/";

    $.ajax({
        type: 'POST',
        url: 'getYTVideos.php', 
        dataType: 'json', 
        success: function(data) {
            $("#video-title-1").html(data.video0.title);
            $("#video-embed-1").attr("src", yTUrlPart + data.video0.id);

            $("#video-title-2").html(data.video1.title);
            $("#video-embed-2").attr("src", yTUrlPart + data.video1.id);

            $("#video-title-3").html(data.video2.title);
            $("#video-embed-3").attr("src", yTUrlPart + data.video2.id);

            $("#video-title-4").html(data.video3.title);
            $("#video-embed-4").attr("src", yTUrlPart + data.video3.id);

            $("#video-title-5").html(data.video4.title);
            $("#video-embed-5").attr("src", yTUrlPart + data.video4.id);
        }
    });
};
getYTVideos();

Modify src of iframe only when youtube url loaded (jQuery or Javascript)

The following would select all IFrames that contain string youtube in their src attribute, and append the string &showinfo=0 to its src attribute.

$("iframe[src*='youtube']").each(function() {
    var src = $(this).attr('src');
    $(this).attr('src', src + '&showinfo=0');
});

You may want to tweak it based on your requirements though:

For instance, you can check entire youtube URL instead of just 'youtube'.
Also, you might want to check if the querystring is not already part of the URL before appending it.

Is there a way to make an iframe YouTube browser?

It seems you won't be able to :

"Refused to display 'https://www.youtube.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'."

The Youtube server X-Frame-Options only allows for sameorigin.

More info about that subject here

Embed YouTube video - Refused to display in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'

You must ensure the URL contains embed rather watch as the /embed endpoint allows outside requests, whereas the /watch endpoint does not.

<iframe width="420" height="315" src="https://www.youtube.com/embed/A6XUVjK9W4o" frameborder="0" allowfullscreen></iframe>

Getting Youtube.Com to Load in Iframe