CSS based change to allow Youtube HD video if screen size permits

[hypermails]

I would like to suggest the following request to be added.to your framework.

I found this to be the simplest way to get a youtube video to popup - but since It take regular links I want to be able to provide a option from youtube that forces HD video. however - since the hardcoded youtube sizes less than 1280x720 does not allow for HD and goes down to 480P, I would request to add media screen options to allow for different video sizes based on screen size.

the cool thing is - once you start in HD - the fl popup is responsive and scales down - but is still HD.

I used the following in featherlight.css - and added the class "flvids" to the youtube link next to "lightbox"

@media (min-width: 1280px) {
.flvids {
width: 1280px;
height: 720px;
}
}

@media (max-width: 1280px) {
.flvids {
width: 720px;
height: 480px;
}
}

html code...

<iframe class="lightbox flvids" src="//www.youtube.com/embed/youtubeID?vq=1080p&rel=0&showinfo=0&autoplay=1" id="video1" style="border:none;" webkitallowfullscreen mozallowfullscreen allowfullscreen> </iframe>

this allows me to use HD option when the browser is full screen mode - and if not - that's cool too.

I am sure there are better ways to force HD for various screen when using youtube. I searched a bit - and couldn't find one. I am sure you'll improve or point me to something way better.

Does that make sense ?

very cool plugin.

[hypermails]

also - I have to assume someone else has had the same idea and updated this css with 20 different screen types and appropriate popup sizes ? if so, I would love for a dwonload link

[noelboss]

Can you provide me with a link to the implementation for testing?

[hypermails]

sure.. sorry for the delay. I created a jsfiddle.

http://jsfiddle.net/L9G8S/

uses the video link as //www.youtube.com/embed/GjMuvAHgx5E?vq=1080p&rel=0&showinfo=0&autoplay=1

the vq=1080p allows for HD play but wont play HD unless iframe size is minimum 1280x720.

the css code is below

.lightbox {
display: none;
}
@media (min-width: 1280px) {
.flvids {
width: 1280px;
height: 720px;
}
}
@media (max-width: 600px) {
.flvids {
width: 200px;
height: 200px;
}
}

• if you run this is a large screen - it will be HD video. if you then resize the window, the video is still HD.
• you can check out full screen of jsfiddle and HD video at http://jsfiddle.net/L9G8S/embedded/result/
• if you run this in a small screen or just run from jsfiddle it will show SD video. ignores the 1080p

[hypermails]

any updates - wondering if you would use this to add a few more items - so the video resizing is automatic for different media screens - thanks

[AnagramEngineering]

I have a somehow similar problem: linking to a youtube video doesn't allow fullscreen.

This can be easily changed by adding the allowfullscreen attribute to the generated iframe.

.attr("allowfullscreen", "true")

Obviously this would add the attribute also to not youtube links, but that wouldn't do any harm. Any chance this change will be included in the plugin itself. So updating would be an option.

iframe: {
process: function(url) {
var deferred = new $.Deferred();
var $content = $('<iframe/>')
.hide()
.attr('src', url)
.attr("allowfullscreen", "true")
.css(structure(this, 'iframe'))
.on('load', function() { deferred.resolve($content.show()); })
// We can't move an <iframe> and avoid reloading it,
// so let's put it in place ourselves right now:
.appendTo(this.$instance.find('.' + this.namespace + '-content'));
return deferred.promise();
}
},

[marcandre]

@ahutatatong Please open a different issue...