Youtube Auto-Embeds Discussion

[kuhla]

Ok. I'm not 100% sure but I think that youtube.com auto-embeds work again. The youtu.be should work too. See first post. It has been changed.

 

PLEASE POST if something doesn't work. An example of something not working would be, you put in a youtube link and it just stays as a link or just stays as text and doesn't change. Don't just workaround it and embed with html or something and not say anything.

 

I'm going to leave that stuff alone now for a while and wait for someone to post a problem or to see if things end up working just fine.

--------------

EDIT: 5-25-2015

 

As it stands right now, just putting text in any of the formats below in your post....

....the forum should automatically embed the video into your post.

 

Previously, embeds also were forced to start playing in 720p (or the next highest available format) but this functionality was taken away by youtube when they deprecated that API. At this time, there is no ETA for getting this feature back (if ever).

[kuhla]

Looks like youtube's update today broke the embed code. I'm looking into it but no promise on a fix today.

[kuhla]

I think I fixed it. Give it overnight to rebuild post content to hopefully fix old embeds. I'll check on it in the morning.

[Malaphax]

It forces HD on Firefox, but not Chrome. Tested both new and old embeds.

[kuhla]

Really quick update on this but it turned out to being a bug, youtube's fault. It was forcing some kind of 3D which was messing the old embed up. The bug was fixed sometime late this afternoon. I will be reverting the changes I made at some point this weekend. I will toot my own horn but we were one of very few sites that still had working forced hd embeds while that was going on.

[kuhla]

Changes reverted. Please check around and let me know if something doesn't work (full screen, best quality up to 720 on play start, etc.).

[kuhla]

Most of you already know this but I'll just make a note of it, starting maybe a month or two ago, youtube started using "https" for share links as opposed to "http". The auto-embed code is looking for "http". When you post "https" it just treats it as a link. Remove the "s" and the embed will work fine.

 

I'll spend a little time looking into whether I can get around this but I make no guarentees.

[kuhla]

Ok. Looks like youtube finally made some big changes to their embed tech. I knew this day was coming. Let's see what I can do with this new stuff.

[kuhla]

I smashed away at it for almost an hour now and made only a little headway. I'll keep working at it but for now I need to get out of my work clothes and have dinner. For the interim, you will just have to go to youtube for HD or fullscreen the videos.

 

[kuhla]

Worked on this all evening. Even tried forcing HTML5 player. It's not looking good. Youtube may have finally decided that they are the only ones who can tell you what resolution they want your embed to run at. I'll keep an eye out but don't hold you breath.

 

EDIT: Obviously auto-embed still works just not auto-HD.

[Malaphax]

Actually it appears that your code is still working on older videos. The monstercat video in the what are you listening to now thread you just posted defaults to HD. That video was released in 2014. Newer uploads appear to default to 480p. I have a feeling this is due to youtube defaulting to html5 rather than using flash. This kind of blows, I'm curious is adjusting the size of the embeded player or other parameters would change how it handles quality.

[kuhla]

Actually it appears that your code is still working on older videos. The monstercat video in the what are you listening to now thread you just posted defaults to HD. That video was released in 2014. Newer uploads appear to default to 480p.

 

I'll double check that later today if I can. I reverted to non-HD code before I stopped working on it last night so I'm not sure what happened there. It wouldn't be the first time that youtube deprecated code and then some kind of waffling/bugs for a few days before settling down.

 

I have a feeling this is due to youtube defaulting to html5 rather than using flash.

 

Actually no. I can force embeds to be the HTML5 player and it's noticibly different. Unless you force it, I think it's always defaulting to flash because youtube documentation still says the HTML5 player is beta. Even if you force it, for videos that are not compatible it still falls back to flash. There isn't any advantage right now to forcing it so I don't want to go that route.

 

This kind of blows, I'm curious is adjusting the size of the embeded player or other parameters would change how it handles quality.

 

This is how youtube has been officially handling it for a while now: The player checks the size player and adjusts the resolution. If you have a player that is 1280x720 then it will try to play at 720p (or the next highest available). However I still use the fixed width skin and I want to continue to use it (it's also the forum default before logging in) so I want 720p to play inside a player that is small (especially for music posts).

 

It is not impossible. I have a working example using javascript that forces 720p in an "undersized" player but I had a lot of difficulty getting it to work on the forum. Was doing a lot of reading here of the official API documentation last night. Like I said, I still want to get it working, with the up-to-date API, but I'm going to need some time.

[kuhla]

This came up in conversation the other day but here is a working test sample of what I'm trying to achieve. *crosses fingers and hopes the code runs fine*

 

 

[Malaphax]

Seems to work just fine, tested in Firefox and Chrome. Are you also going to disable annotations by default in the auto-embed code?

[kuhla]

What I posted was done manually with html enabled. I had issues trying to integrate it with the auto embed system. It's still a work in progress. All the extras (like annotations) are all down the road.

 

EDIT: Ha! I just noticed that part of my HTML code has disappeared in my most recent post. There is a whole <script> section which has just disappeared. When I go back to edit it, it's just gone.

 

EDIT2: If you save this in notepad to an html file, you will see the problem. My limited coding knowledge is probably what is holding this back.

<html><body>

<script>

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

	var xyzplayer;
	function onYouTubeIframeAPIReady() {
	xyzplayer = new YT.Player('xyzplayer', {
		events: {
			'onStateChange': onPlayerStateChange
			}
		});
	}

	function onPlayerStateChange(event) {
	if (event.data == YT.PlayerState.PLAYING) {
	event.target.setPlaybackQuality('hd720');
		}
	}

    </script>

<iframe id="xyzplayer" type="text/html" width="832" height="468" src="http://www.youtube.com/embed/M7lc1UVf-VE?enablejsapi=1&html5=1" frameborder="0"></iframe>

<br><br><br>

<script>

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

	var abcplayer;
	function onYouTubeIframeAPIReady() {
	abcplayer = new YT.Player('abcplayer', {
		events: {
			'onStateChange': onPlayerStateChange
			}
		});
	}

	function onPlayerStateChange(event) {
	if (event.data == YT.PlayerState.PLAYING) {
	event.target.setPlaybackQuality('hd720');
		}
	}

    </script>

<iframe id="abcplayer" type="text/html" width="832" height="468" src="http://www.youtube.com/embed/IwfUnkBfdZ4?enablejsapi=1&html5=1" frameborder="0"></iframe>

</body></html>

[kuhla]

It's a bit slow at work so....

 

I'm really close to giving up on this. Let me show you what I have been able to accomplish:

 

http://www.tactinept.com/other/Script%20Test.html- Works beautifully, exactly the way I would want it, but the code is not modular at all.

 

http://www.tactinept.com/other/Button%20Test.html- Workaround. By pressing the button beneath it, it does what I want, provided you hit the button and the code is modular. If you don't hit the button then it does nothing special.

 

The remaining problem in both solutions is variables. Each player needs a unique name. I thought about just passing the youtube video ID into it since the IDs are always unique but the problem is that the script can't handle special characters. Every time there is one of those, it breaks.

 

EDIT: I keep harping on modular because the forum does a straight replacement. It sees www.youutube.com/stuff and directly replaces it with code. In the code I posted previously, the reason it was breaking was because some things cannot be called twice. Only the last one will work. Now the only remaining problem is variable names.

 

EDIT2: I may be able to do something with REGEX but that's dicey.... if I have a video with ID M7lc1UVf-VE and post another on the page with M7lc1UVf@VE it will resolve both variable names to M7lc1UVfVE and break the "Play + HD" button.

[kuhla]

EDIT2: I may be able to do something with REGEX but that's dicey.... if I have a video with ID M7lc1UVf-VE and post another on the page with M7lc1UVf@VE it will resolve both variable names to M7lc1UVfVE and break the "Play + HD" button.

 

I tried doing this and got fairly far until I ran into yet more problems (multiple regex match groups, look-ahead, strings starting with hyphens). I'm sorry everyone but for now I'm dropping this. I'll change the embed code slightly to at least take advantage of HTML5 but beyond that, the forcing HD will be on permanent hold.

[Malaphax]

The current implementation you're using does not scale videos on mobile. it appears to be using a fixed width player. The Witcher 3 video I just posted does not scale while previous videos do.

[kuhla]

I can't test it right now myself, but try posting it a second time, use the short, https version (like below). I made a change. if you can test it, let me know.

[Malaphax]

 

This seems to work on mobile with appropriate scaling.

[kuhla]

Did some testing at home. Confirmed. Fixed mobile scaling. I'm not sure if I want to do a "go back and rebuild post content" or not. It would clear out old flash embeds and replace them with HTML5. Should I do it? In time, those will mostly disappear on their own.

[kuhla]

I know they are kind of broken again. I'll look at this later. No time now.

[kuhla]

I know they are kind of broken again. I'll look at this later. No time now.

 

It's worse than that. All media tags have stopped working.

[kuhla]

I submitted an official support ticket on Friday. I'm still waiting on an official reply (weekend). As it stands right now sometimes media tags seems to be working and other times it's just nothing at all.

 

If things don't start working soon, or support doesn't provide the help we need, I'm going to start doing something more drastic.

[kuhla]

I submitted an official support ticket on Friday.

 

Just FYI, IPS_support is the account that I made for the official support to use.