Embed Naver V videos in your blog or website

UPDATE

Naver has finally included an embed function right along with the videos, under the Share menu. 

A sample embed code looks like this:

<iframe src='https://www.vlive.tv/embed/28322?autoPlay=true' frameborder='no' scrolling='no' marginwidth='0' marginheight='0' WIDTH='544' HEIGHT='306' allowfullscreen></iframe>

So this post is unnecessary now. Left up for reference only. 



A reader asked me how she could embed Naver V videos in her personal blog. Basically, it's possible, but the result is a little clumsy or awkward. I'll show you some examples now, using the video
BLACKPINK - '휘파람'(WHISTLE). The nice thing about this method is that you only need the 5-digit number in the URL address of the video, which in this case is 12168 from the link [https://www.vlive.tv/video/12168]


What your embeded video will (hopefully) look like

Now, it's difficult to embed just the video file (see the end of this post), but the pages the videos load on are simple, so if you really want to embed the video, you can take the easy way, and just embed the whole page using the IFRAME tag. 

Embed the full-page video


You can embed the full page, size-adjusted so that just the video area is visible, and target it to load at the position of the video.

Here's the code. You only need to change the 5-digit number:
<iframe align="center" height="500px" scrolling="no" src="https://www.vlive.tv/video/12168#playerBoxArea" width="880px"></iframe>

And here's the resulting embedded video. You might need to click it to play:



Now that looks great, but it's probably way too big. Sadly, Naver V's video pages are not responsive to browser window size, which means I can't easily resize the video player.

So the best alternative is use a video player that's already smaller by default: the mobile site.

Embed the smaller 'mobile' page video


Aside from being probably too big, the full-size embed might load slowly, especially if you're embedding multiple videos. So overall, I think a better option for a blog is to embed the mobile site page. If you size it right, it can look very clean and nice, including the artist/title and etc. I recommend this method.

Here's the code:
<iframe align="center" height="400px" scrolling="no" src="https://m.vlive.tv/video/12168" width="300px"></iframe>

And here's the result:


Not bad, right? A better size would be to make the height 350px, but then part of the info box will be hidden if you get the "Install Naver V!" message pop-up. It's a trade off I think: 400px fits the pop-up and keeps the video looking good; but if the pop-up doesn't show, you get some extra related-video page portion visible. Play with it and see what works best for you. 

Why embed the whole page?


You may notice that we are embedding the entire V page, not just the video. This is a lazy shortcut, because Naver V's videos are not easy to embed. Naver does not provide any simple, official embed code like YouTube does. I tried extracting the raw code for the videos and modifying it, but always I got stuck with expiring video tokens (I bet modifying the rmcPlayer argument could fix this, but my trials-and-errors didn't find a solution) In other words, you can embed just the video file, but it will only work for about 24 hours. After that you'd need to refresh the Naver V page and generate a new code. Embedding the page and focusing on a portion of it (like I've done here) solves that issue. So although it's not perfect, this is the most simple and easy method I can think of.

But I know many of you are smarter than me. I'm not an expert at this stuff. I'm sure there's a better solution to embed just the video content and have it endure longer, but I don't know it. Like I said, I tried various edits of the code, but they'd either return errors or expire. If anyone can figure out a better way, let me know! You can also try playing with the sizes and zoom levels, which might get you more appropriate size options.

Places to embed the code


Here are some places I tried out:

  • Blogger of course works fine, as you can see above. 
  • Wordpress users, I'm sorry but this may not work for you. Wordpress limits the type of content you can embed, unless you are self-hosted or a VIP member
  • Tumblr users, the code works, but if you use the full-size code, your Tumblr template may cut off the side. Use the mobile one in that case (it looks better anyway). To add it to your Tumblr, make a new "Video" post, choose "Add video from the web", and paste the code there. It will appear as "Watch on (your blog)..." in your dashboard but the video will play on your actual blog page.

Have fun spreading that K-pop love.



Comments