What you need:
– Basic knowledge in HTML and CSS.
– A Mac and Xcode (no programming skills required) for exporting the app.

Embedding YouTube

Embedding a YouTube video is similar to adding an image. If placed in a column, it will be scaled to the width of that column. The height of the video is set to 200px. If you want modify the size, take a look at “object, param, embed {}” in “media.css”. You may use a “media-left“ or “media-right” div to display videos within large columns.

YouTube offers two ways of embedding videos. The “new” way creates an iFrame on the page. Because iFrames won’t work in the Laker iOS app, embed the “old” code. As with images, you can add a caption.

Notice: The video’s dimension set in the code provided by YouTube has no effect, because Laker overwrites them anyway.

No video in the xCode simulator? Don’t worry, it’s working on iPad and iPhone. There must be some glitch in the simulator.

Example code:

<div class="media-right">

<!--Code provided by YouTube-->
<object width="1280" height="750">
<param name="movie" value="http://www.youtube.com/v/S9in-BscH5M?fs=1&amp;hl=de_DE&amp;hd=1"></param>
<param name="allowFullScreen" value="true"></param><param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/S9in-BscH5M?fs=1&amp;hl=de_DE&amp;hd=1" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="1280" height="750"></embed>
</object>

<div class="caption"><p>Time lapse NYC by Josh Owens <br />(Internetconnection required).</p></div><!--Div caption-->

</div><!--Div media right-->

Laker is now on github! Please discuss issues, suggestions or tipps in the github forums of Laker. Thanks! ;)

15 Responses to “Embedding YouTube”

  1. Doesn’t seem like this is working with Xcode? Can’t seem to see any video at all.

  2. Youtube-Videos are not shown in the simulator. Try it on an iOS-Device.

  3. Is there any way to use a local video file rather than have to stream from youtube?

    Thanks for the awesome framework!

  4. Sure: http://www.lakercompendium.com/how-to-use/modules/video/

  5. Hello, is it possible to embed a vidéo from Vimeo ?
    Thanks,
    Nicolas

  6. yeah, but you have to use the old embed-code. The one which starts with …
    If you click on the vimeo video “embed”-link there is an option in the text at the beginning to switch to the “old code”.

  7. Hi Florian, Thank you for your help.

  8. Im using an embedded javascript library to display images in a cool way on my laker project. However when I put a YouTube video on the same page the Youtube is always on top (Z level) It looks fine on the desktop but iOS always seems to put the embedded video on top.

    Ive looked around on the net a bit but havent really found anything

    PLEASE HELP!!!

  9. Awesome work!!!! I am struggling to get the embeded YouTube videos to display underneath a javascript lightbox I am using in conjunction with the Laker setup. [z-index is not the issue] it seems the embed code for youtube will always display as the top most layer on iOS devices. [works fine in a browser even without wmode=transparent].

    I would normally live with this but when I use the video setup you suggest it works perfectly on an embeded .mp4. I have spent 2 days trying to solve this.

    for clarity: i want to use a jquery lightbox i have but the youtube videos display over the top of the image that pops up in a modal view

  10. First of all, awesome framework! Nice!

    I have trouble making Vimeo-embed to work. Tried the old embed-code-option from Vimeo with no luck.

    Regards, Jan

    This is the code I am using? Is it correct?

    Introduction to DSLR Cameras with Philip Bloom from Vimeo Video School on Vimeo.

  11. Hi Florian, Great Framework!.

    I have an app that has been working nicely since iOS 5.0, but now I’m having a problem.

    In iOS 6, when I reach a dossier that has an embedded youtube video, it automatically switches to safari. And if i switch back to my app, the video is not there, it shows a blank space where it was supposed to be.

    Hope you can help me.

  12. Hey Oscar,
    try also asking that in the baker forums. I also send a tweet to them regarding that mattter.

  13. Hello, im having a small issue on the pages where i embed youtube videos. Im using the three-card rendering mode in baker to smooth the navigation, but this is making so if i start playing a video on page 1 and swipe to page 2, the video keeps playing… Isn’t there a way to stop the videos on a page when moving to an adjacent page?

  14. try to post that in the baker forums. I dont think its possible doing it just via HTML.

  15. Hi Is the youtube embed code still working on the new vids? coz im working on something the sample is working but when im embedding my own video it gives me an error video unavailable

Leave a comment, suggestion or question.

You must be logged in to post a comment.