Embedding youtube videos

First of all, does ionic support embedding iframes of videos in mobile applications ?

If it does, I would like to know the best way to include youtube videos in an Ionic application.

I’ve used just a standard Iframe for youtube videos. The only trick I do is to include some extra css and markup to make the videos responsive, as described here

Thanks for your reply @mhartington ! I Included some css like you said and it worked :smiley: Maybe I should pen this to help others.

Good idea, you could even go as far as to work up a demo using the responsive grid layout.

hi @mhartington,
I faced the emedding youtube video problem.
Please refer to http://forum.ionicframework.com/t/embedding-youtube-videos-ios-platform/11896

Do you know how to solve it?
Thank you very much.

Has anyone encountered similar issues with Vimeo?

Use this:

<a> <div class="row"> <div class="col"> <div class="video-container"> <iframe src="http://www.youtube.com/embed/shGhZzJ7o-g?rel=0" frameborder="0" allowfullscreen></iframe> </div> </div> </div> </a>


`.video-container {
position: relative;
padding-bottom: 56.25%;
padding-top: 30px; height: 0; overflow: hidden;

.video-container iframe,
.video-container object,
.video-container embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;

NOTES: keep rel=0, change code before question mark for different videos, its unique fingerprint for each video… keep embed… I put this in a list view with background image… works great!

1 Like

doesn’t worked for me :frowning:

we can embed the url in HTML5 video src is this right option…