{"id":12433,"date":"2015-02-11T05:09:45","date_gmt":"2015-02-10T18:09:45","guid":{"rendered":"http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=12433"},"modified":"2015-02-11T05:09:45","modified_gmt":"2015-02-10T18:09:45","slug":"google-drive-embed-video-css-rotation-code-tutorial","status":"publish","type":"post","link":"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-drive-embed-video-css-rotation-code-tutorial\/","title":{"rendered":"Google Drive Embed Video CSS Rotation Code Tutorial"},"content":{"rendered":"<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Romeo_and_Nala.html\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"Google Drive Embed Video CSS3 Rotation Code Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/GoogleDrive_RotatedVideo.jpeg\" id='gdrv' onmouseover=\" this.src=this.src.replace('.jpg','.~png').replace('.png','.~gif').replace('.gif','.~jpeg').replace('.jpeg','.~jpg').replace('~','');    \" title=\"Google Drive Embed Video CSS3 Rotation Code Tutorial\"   \/><\/a><p class=\"wp-caption-text\">Google Drive Embed Video CSS Rotation Code Tutorial<\/p><\/div>\n<p>Sharing videos happens all the time now, especially from mobile phones, and sometimes they are &#8220;posterior around visage&#8221;, if you know what we mean.  Never fear, <a target=_blank href='http:\/\/www.w3schools.com\/cssref\/css3_pr_rotation.asp' title='CSS3 rotation information from w3schools'>CSS3 rotation<\/a> is here!<\/p>\n<p>The video involved here came to me as an email, which you can see, also with <a target=_blank title='QuickTime Player Video Rotation for YouTube Tutorial' href='#qpvrfyt'>QuickTime Player Video Rotation for YouTube Tutorial<\/a> as shown below.  Along the way, in this tutorial, took a walk down a garden path &#8230; aren&#8217;t the petunias great this time of year &#8230; but we digress &#8230; we, at one stage Shared the video to <a target=_blank title='Google Drive' href='http:\/\/www.google.com.au\/drive\/'>Google Drive<\/a>, and wanted to show you bit of the brilliance in software integration (and how you can help it along (or you can see those &#8220;third party&#8221; app tools too, later, should you wish)) &#8230; anyway &#8230; did &#8230;<\/p>\n<ul>\n<li>got email with the video attachment and right-clicked to Share on (ie. upload to) Google Drive<\/li>\n<li>once on <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/GoogleDrive_RotatedVideo.gif\" title='Google Drive sharing via the Gmail email'>Google Drive<\/a> clicked its link (saw the &#8220;third party&#8221; idea to play, but settled for Google Drive Viewer method of playing the video)<\/li>\n<li>with Google Drive Viewer selected More actions (menu)-&gt;Embed item&#8230; <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/GoogleDrive_RotatedVideo.png\" title='Embed video code of Google Drive Viewer'>as per<\/a><\/li>\n<li>used that <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/GoogleDrive_RotatedVideo.png\" title='Embed video code of Google Drive Viewer'>embed code<\/a> in the left cell of <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/GoogleDrive_RotatedVideo.jpeg\">the Firefox live run<\/a> and used CSS3 rotation ideas affecting a supervisory HTML <i>div<\/i> element encompassing that same embed item code (with great help here &#8230; <a target=_blank href='http:\/\/stackoverflow.com\/questions\/14725094\/unable-to-css-rotate-iframe-containing-embedded-youtube-video-in-ie' title='Useful link'>link<\/a> &#8230; thanks) for the right cell<\/li>\n<li>blow your &#8220;right hand&#8221; mind (but notice how the video is the right way up) with a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Romeo_and_Nala.html\" title='Click picture'>live run<\/a> &#8230; as long as you aren&#8217;t using <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/GoogleDrive_RotatedVideo.jpg\" title=\"Internet Explorer problematic live run\">Internet Explorer<\/a> that is<\/li>\n<\/ul>\n<p>On the 90 degree rotated <a target=_blank title='HTML iframe information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_div.asp'><i>div<\/i><\/a> parenting (wrapping) the <a target=_blank title='HTML iframe information from w3schools' href='http:\/\/www.w3schools.com\/tags\/tag_iframe.asp'><i>iframe<\/i><\/a> the way the Play wording and Play button facing down happens and the positioning of the Controls happens will\/might\/could blow your mind &#8230; but who doesn&#8217;t need their mind blown every now and then.<\/p>\n<p>Anyway, these CSS rotation ideas are very interesting, &amp; you can review the HTML gist &#8230; <code><br \/>\n...<br \/>\n&lt;head&gt;<br \/>\n&lt;style&gt;<br \/>\ndiv {<br \/>\n    -moz-transform:    rotate(90deg);<br \/>\n    -o-transform:      rotate(90deg);<br \/>\n    -webkit-transform: rotate(90deg);<br \/>\n    -ms-transform:     rotate(90deg);<br \/>\n    transform:         rotate(90deg);<br \/>\n}<br \/>\n&lt;\/style&gt;<br \/>\n&lt;\/head&gt;<br \/>\n...<br \/>\n<\/code> &#8230; of the idea via the HTML programming source code <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Romeo_and_Nala.html_GETME\" title='Romeo_and_Nala.html'>Romeo_and_Nala.html<\/a> and a <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/HTMLCSS\/Romeo_and_Nala.html\" title='Click picture'>live run<\/a>, today.<\/p>\n<hr \/>\n<p id='qpvrfyt'>Previous relevant <a target=_blank title='QuickTime Player Video Rotation for YouTube Tutorial' href='http:\/\/www.rjmprogramming.com.au\/wordpress\/?p=12156'>QuickTime Player Video Rotation for YouTube Tutorial<\/a> is shown below.<\/p>\n<div style=\"width: 230px\" class=\"wp-caption alignnone\"><a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/QuickTimePlayer\/FlipForYouTube\/\"><img decoding=\"async\" style=\"float:left; border: 15px solid pink;\" alt=\"QuickTime Player Video Rotation for YouTube Tutorial\" src=\"http:\/\/www.rjmprogramming.com.au\/Mac\/QuickTimePlayer\/FlipForYouTube\/Romeo_Nala_flip-20of.jpg\" title=\"QuickTime Player Video Rotation for YouTube Tutorial\"   \/><\/a><p class=\"wp-caption-text\">QuickTime Player Video Rotation for YouTube Tutorial<\/p><\/div>\n<p>The automation and software integration of videos, that need rotation, all the way from mobile phone creation to YouTube showing, via <a target=_blank title='QuickTime Player' href='http:\/\/www.apple.com\/au\/quicktime\/download\/'>QuickTime Player<\/a> and Gmail email is pretty seamless, except that YouTube blocks QuickTime Player&#8217;s share to YouTube functionality, which made me, today, change my Gmail password &#8230; grrrrrrrrhhhhh &#8230; anyway, otherwise, it&#8217;s still pretty easy to &#8230;<\/p>\n<ul>\n<li>open Gmail email to receive a *.MOV video (featuring <a onmouseover=\"document.getElementById('ourpic').style.display='inline'; \" target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/QuickTimePlayer\/FlipForYouTube\/Romeo_Nala.jpg\" title='Romeo and Nala'>Romeo and Nala<\/a>\n<div style='display:inline;'><img  id='ourpic' style='display:none;'  src='http:\/\/www.rjmprogramming.com.au\/Mac\/QuickTimePlayer\/FlipForYouTube\/Romeo_Nala.jpg' title='RomeoNala'><\/img><\/div>\n<p>) attachment derived from one created by an iPhone but rotated so that you&#8217;d have to turn your head to view it<\/li>\n<li>download that *.MOV and choose to open with QuickTime Player (which is the default application for such occurrences on this Mac laptop &#8230; but maybe not your (Mac (laptop)))<\/li>\n<li>use QuickTime Player&#8217;s Edit-&gt;Rotate Right to make the video watchable without amusing the rest of the household (spoilsport!)<\/li>\n<li>use QuickTime Player&#8217;s File-&gt;Export-&gt;480p&#8230; option to export to another *.MOV we&#8217;ll call NalaBBearFlipped.MOV<\/li>\n<li>click the &#8220;Share&#8221; icon at bottom right and select YouTube option<\/li>\n<li>fill in your Gmail account (link to YouTube channel) credentials &#8230; shock, horror &#8230; <a target=_blank title='YouTube QuickTime Player issue' href='https:\/\/discussions.apple.com\/thread\/6779095'>found out YouTube blocks QuickTime Player<\/a> &#8230; so, instead &#8230;<\/li>\n<li>go to Firefox web browser and go to <a target=_blank title='YouTube' href='https:\/\/www.youtube.com'>YouTube<\/a> and open up your YouTube channel and click its &#8220;Upload&#8221; button<\/li>\n<li>go to Finder and go to the folder with NalaBBearFlipped.MOV<\/li>\n<li>halve the screens for each<\/li>\n<li>drag and drop Finder&#8217;s NalaBBearFlipped.MOV into the YouTube drag and drop area<\/li>\n<li>fill out all the &#8220;necessaries&#8221; at YouTube<\/li>\n<li>click YouTube&#8217;s &#8220;Publish&#8221; button &#8230; voila &#8230; a new YouTube clip as shown below &#8230;<\/li>\n<\/ul>\n<p><iframe loading=\"lazy\" width=\"560\" height=\"315\" src=\"https:\/\/www.youtube.com\/embed\/XpL3sCk-zOg\" frameborder=\"0\" allowfullscreen><\/iframe><\/p>\n<p>Hope you enjoy today&#8217;s <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/QuickTimePlayer\/FlipForYouTube\/\" title='Click picture'>tutorial<\/a>, the main lesson of which was intended to be about the <a target=_blank href=\"http:\/\/www.rjmprogramming.com.au\/Mac\/QuickTimePlayer\/FlipForYouTube\/Romeo_Nala_flip-5of.jpg\" title='Rotation in QuickTime Player'>rotating<\/a> of videos, with the help of QuickTime Player, in readiness for YouTube when using a Mac laptop.<\/p>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d12156' onclick='var dv=document.getElementById(\"d12156\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=youtube\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d12156' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n<hr \/>\n<p>If this was interesting you may be interested in <a title='Click here to see topics in which you might be interested' href='#d12433' onclick='var dv=document.getElementById(\"d12433\"); dv.innerHTML = \"&lt;iframe width=670 height=600 src=\" + \"http:\/\/www.rjmprogramming.com.au\/wordpress\/?tag=rotation\" + \"&gt;&lt;\/iframe&gt;\"; dv.style.display = \"block\";'>this<\/a> too.<\/p>\n<div id='d12433' style='display: none; border-left: 2px solid green; border-top: 2px solid green;'><\/div>\n","protected":false},"excerpt":{"rendered":"<p>Sharing videos happens all the time now, especially from mobile phones, and sometimes they are &#8220;posterior around visage&#8221;, if you know what we mean. Never fear, CSS3 rotation is here! The video involved here came to me as an email, &hellip; <a href=\"https:\/\/www.rjmprogramming.com.au\/ITblog\/google-drive-embed-video-css-rotation-code-tutorial\/\">Continue reading <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4,12,33,37],"tags":[84,275,281,282,380,439,503,513,523,576,622,631,760,997,1072,1132,1168,1319,1369],"class_list":["post-12433","post","type-post","status-publish","format-standard","hentry","category-animation","category-elearning","category-software","category-tutorials","tag-animation-2","tag-cross-browser","tag-css","tag-css3","tag-email","tag-firefox","tag-gmail","tag-google","tag-google-drive","tag-html","tag-internet-explorer","tag-iphone","tag-media","tag-programming","tag-rotation","tag-shar","tag-software-integration","tag-tutorial","tag-video"],"_links":{"self":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/12433"}],"collection":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/comments?post=12433"}],"version-history":[{"count":0,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/posts\/12433\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/media?parent=12433"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/categories?post=12433"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.rjmprogramming.com.au\/ITblog\/wp-json\/wp\/v2\/tags?post=12433"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}