iOS Embedded YouTube Video Thumbnail Flashes Red

RagingGoat · Nov 12, 2012

I have a YouTube thumbnail embedded in my app. It works just fine but the thumbnail is just a red box for a couple seconds before the thumbnail image appears. I'm wondering if anyone knows how to get rid of that flash of red? Here is my code:

Code:

//
//  YouTubeView.m
//  KFBNewsroom
//
//  Created by KFB on 11/8/12.
//  Copyright (c) 2012 com.kfb. All rights reserved.
//

#import "YouTubeView.h"

@interface YouTubeView ()

@end

@implementation YouTubeView
@synthesize thumbnailView;

- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        // Custom initialization
    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    self.title = @"Monthly Video";
    // Do any additional setup after loading the view from its nib.
    // webView is a UIWebView, either initialized programmatically or loaded as part of a xib.
    
    NSString *htmlString = @"<html><head><meta name = \"viewport\" content = \"initial-scale = 1.0, user-scalable = no, width = 280\"/></head><body style=\"background:#F00;margin-top:0px;margin-left:0px\"><div><object width=\"280\" height=\"218\"><param name=\"movie\" value=\"http://www.youtube.com/embed/videoseries?list=PL0B9BF37A24840E28&hl=en_US""></param><param name=\"wmode\" value=\"transparent\"></param><embed src=\"http://www.youtube.com/embed/videoseries?list=PL0B9BF37A24840E28&hl=en_US""type=\"application/x-shockwave-flash\" wmode=\"transparent\" width=\"280\" height=\"218\"></embed></object></div></body></html>";
    
    [thumbnailView loadHTMLString:htmlString baseURL:[NSURL URLWithString:@"http://www.youtube.com/playlist?list=PL0B9BF37A24840E28&feature=plcp"]];

}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}

@end

ccamelot · Nov 18, 2012

Just make your HTML background transparent

Just make your HTML background transparent.
Here:

Code:

<body style=\"background:#F00;margin-top:0 ...

change it to:

Code:

<body style=\"background:transparent;margin-top:0

Why you're loading this thumbnail to UIWebView? Better make UIImage from remote file and put it into UIImageView.

Code:

UIImage *thumbnail = [UIImage imageWithData:[NSData dataWithContentsOfURL:[NSURL urlWithString:@"http://www.youtube.com/yourThumbnail.jpg"]]];
[myUIImageView setImage:thumbnail];

...something like that.

RagingGoat · Nov 19, 2012

@ccamelot,

I just saw your reply but I actually figured it out already. This is actually how I'm doing it now.

Code:

//
//  YouTubeView.m
//  KFBNewsroom
//
//  Created by Adam Rayborn/Jon Mattingly on 11/8/12.
//  Copyright (c) 2012 com.kfb. All rights reserved.
//

#import "YouTubeView.h"
#import <MediaPlayer/MediaPlayer.h>
#import "KFBAppDelegate.h"
@interface YouTubeView ()
{
    UIWindow *window;
}

@end

@implementation YouTubeView
@synthesize thumbnailView;
- (id)initWithNibName:(NSString *)nibNameOrNil bundle:(NSBundle *)nibBundleOrNil
{
    self = [super initWithNibName:nibNameOrNil bundle:nibBundleOrNil];
    if (self) {
        thumbnailView.backgroundColor = [UIColor clearColor];
        KFBAppDelegate* myDelegate = (((KFBAppDelegate*) [UIApplication sharedApplication].delegate));
        window = myDelegate.window;
        // Custom initialization
        
        [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(youTubeStarted:) name:@"UIMoviePlayerControllerDidEnterFullscreenNotification" object:nil];
        [[NSNotificationCenter defaultCenter] addObserver:self selector:@selector(youTubeFinished:) name:@"UIMoviePlayerControllerDidExitFullscreenNotification" object:nil];

    }
    return self;
}

- (void)viewDidLoad
{
    [super viewDidLoad];
    /*
    
    

    
    
    [self.view setBounds:CGRectMake( 0, 0, 480, 320)];
    [self.view setCenter:CGPointMake(160, 240)];
    [self.view setTransform:CGAffineTransformMakeRotation(M_PI/ 2)];
     */
    self.title = @"Monthly Video";
    // Do any additional setup after loading the view from its nib.
    // webView is a UIWebView, either initialized programmatically or loaded as part of a xib.
    
    int screenWidth = [UIScreen mainScreen].bounds.size.height;
    NSString *htmlString = [NSString stringWithFormat:@"<html><head><meta name = \"viewport\" content = \"initial-scale = 1.0, user-scalable = no, width = %d\"/></head><body style=\"background:#000;margin-top:10px;margin-left:0px\"><div><object width=\"220\" height=\"128\"><param name=\"movie\" value=\"http://www.youtube.com/embed/videoseries?list=PL0B9BF37A24840E28&hl=en_US""></param><param name=\"wmode\" value=\"transparent\"></param><embed src=\"http://www.youtube.com/embed/videoseries?list=PL0B9BF37A24840E28&hl=en_US""type=\"application/x-shockwave-flash\" wmode=\"transparent\" width=\"%d\" height=\"218\"></embed></object></div></body></html>",screenWidth,screenWidth];
    

    [thumbnailView loadHTMLString:htmlString baseURL:[NSURL URLWithString:@"http://www.youtube.com/playlist?list=PL0B9BF37A24840E28&feature=plcp"]];
    
}

-(IBAction)back:(id)sender
{
    [self dismissViewControllerAnimated:YES completion:nil];
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
- (UIInterfaceOrientation)preferredInterfaceOrientationForPresentation
{
    return UIInterfaceOrientationLandscapeLeft;
}

-(NSUInteger)supportedInterfaceOrientations
{
    return UIInterfaceOrientationMaskLandscape;
    //return UIDeviceOrientationLandscapeLeft | UIDeviceOrientationLandscapeRight | UIDeviceOrientationPortraitUpsideDown;
}
-(void)youTubeStarted:(id)sender
{
    NSLog(@"Video Starting");

}
-(void)youTubeFinished:(id)sender
{
    NSLog(@"bye");
}
@end

Search

Search

iOS Embedded YouTube Video Thumbnail Flashes Red

RagingGoat

macrumors 6502

ccamelot

macrumors member

RagingGoat

macrumors 6502

Our Staff