Is it safe to fix the width of an embedded YouTube video and let the height take care of itself?
I have an application where users post notices to a notice board. The notices are mostly text (with limited html tags) and embedded images. I am now adding support for embedded YouTube Videos.
The posts come in two different body sizes: 298px and 638px. When a user wants to embed a video they will go to YouTube.com, find the video, select Share->Embed. They will then copy the iframe code and paste it in to the post they are creating.
Here's an example of the iframe code for a YouTube video:
<iframe width="560" height="315" src="https://www.youtube.com/embed/ny7ysh6y2g0" frameborder="0" allowfullscreen></iframe>
I am using Redactor for WYSIWYG (http://imperavi.com/redactor/), which makes it easy to update the attributes of uploads and embeds, so I am planning to set the width (to either 298px or 638px), and remove the height. The few tests that I have done seem to work fine, but I don't fully understand the way that YouTube works with aspect and dimensions.
I think that the height will be automatically set using an aspect ratio which is appropriate for viewing (16:9?), but I can be sure without testing heaps of examples. Is what I am proposing going to give users a good viewing experience?
Removing the height from the iframe would not guarantee the correct aspect ratio. As pointed out in the comments, YouTube cannot interact with your page in any way. An iframe size is controlled entirely by you and it's content plays no part in its size.
If you wish to resize the iframe according to the correct aspect radio, you can use a technique outlined in this post:
Embedding a Youtube/Vimeo video with the correct aspect ratio
Related
I load a UIWebView with an html script that contains embeeded video (almost all from youtube). Reproducing videos was working ok. But since this was tested on iOS 10 the full screen takes all the screen but the video itself dont increase nothing, just only center and dont change size. But if i try with iOS 9 or 8 the full screen resize the video to fit all the screen
I think iOS has implemented new rules about the default video player on webview, or something is missing on the html script. I was trying to add tags like on the script and css rules, but nothing yet. Thanks.
if on iOS 10，use wkwebview，otherwise uiwebview，if else solve it
So I have used java to load only a thumbnail of a youtube video. When the thumb is clicked, the image div is replaced completely with an embed of the video on "autoplay." Everything was working as I wanted BUT
On YouTube when I look at the Analytics/traffic sources the "Unknown — embedded player" views dropped 90%+ to almost nothing as seen on the picture at the above URL. This is apparently because "autoplay" views are not recognized by YouTube as legitimate views which i confirmed on stackoverflow and elsewhere.
So... I want the best of both worlds. I want the fast load speed that comes with loading only the thumb at first AND I want to avoid autoplay so the views actually count on YouTube when the thumb is clicked. My temporary solution is to set autoplay=0 which forces the user to essentially click the same thumb twice, though I would prefer to avoid the redundant click.
Here is a example page from my site that has 4 embedded videos.
Use waiting/loading image instead of video thumbnail. Then use jquery to replace that waiting image by youtube embeded code few seconds after page loaded.
I've come across an interesting problem with UIWebView.
I basically want to use a UiWebView on an iPad app as a modal pop-up to show wikipedia or amazon mobile pages if the user performs certain actions.
I have the code to create and load the UIWebView working fine, but the content loaded pays no attention to the width of the UIWebView. I wanted the UIWebView to (roughly) be the width of an iPhone screen and have set the frame accordingly.
However, when the content loads it appears that it loads at the width and height of an iPad screen so it scrolls both horizontally and vertically. Vertical scrolling is fine but horizontal is not.
When the same URLs are loaded on the iPhone (just in safari), the content resizes to fit the width of the device, which I assume is using a meta-tag?
The question is, how I can replicate this behaviour in a UIWebView on the iPad and "force" the content down to a set width.
Update
Apologies, this is a duplicate of the question answered at UIWebView -- load external website, programmatically set initial zoom scale, and allow user to zoom afterwards
This solution is smart and works.
The size of the content will depend on a mix of the size of the browser's viewport, as well as the HTML / CSS that is implemented on the site.
As you are saying the site scales correctly in Safari, Check the frame of the webView is correct in your app. Sometimes the site may have implemented aspect ratio comparisons to work out which responsive view to show, so experiment also with the height of the modal to match the size of an iPhone.
Another thing you can try is setting constraints on the webView. I've found setting constraints will also sometimes alter the viewport size & rendering.
If that doesn't work - You could also try scaling the content. The answer here will help: HTML Content fit in UIWebview without zooming out
Coding HTML5 page for use in iPad Mobile Safari that has tag for embedding video file. Using CSS3 media queries to determine orientation of iPad, which works fine.
Now need to change the src of the video tag depending on orientation. In other words, there are two videos, one sized to work in landscape view and one to work in portrait view.
Any advice on how to approach this problem? I'm sure it's something pretty simple, but I can't seem to get it to work.
I'd just insert the video tag using javascript, after it's looked at the document width and figured out the orientation.
I am using HTML5 video tags in a UIWebview on the iPad, and positioning them as needed using CSS. The key part of these videos is that they are designed to take up part, but not all, of the visible area on the page. When I'm doing this in the "normal" mode of displaying content only to the primary UIScreen, everything works great.
However, when an external VGA projector is hooked up as a second UIScreen, the video tag content immediately becomes FULL SCREEN. This seems to also happen in Safari when looking at, for example, YouTube videos. In searching the docs, there seems to be no way to stop / control this behavior.
Is there any way to stop a video tag from forcing its content to go to full screen when a second display is connected?
Unfortunately, using a UIWebView iOS 3.2 doesn't offer any way to do this. Video in a UIWebView always plays fullscreen on an external display using the TV out feature.
However, the good news is that iOS 4 does offer a solution. UIWebView has a couple of new properties:
allowsInlineMediaPlayback
http://developer.apple.com/library/ios/documentation/uikit/reference/UIWebView_Class/Reference/Reference.html#//apple_ref/doc/uid/TP40006950-CH3-SW32
mediaPlaybackRequiresUserAction
http://developer.apple.com/library/ios/documentation/uikit/reference/UIWebView_Class/Reference/Reference.html#//apple_ref/doc/uid/TP40006950-CH3-SW33
The former will allow the videos to remain 'inline' as opposed to using the full-screen player.