{"id":818,"date":"2014-12-02T13:41:02","date_gmt":"2014-12-02T19:41:02","guid":{"rendered":"http:\/\/cssnewbie.com\/?p=818"},"modified":"2014-12-02T13:41:02","modified_gmt":"2014-12-02T19:41:02","slug":"how-to-embed-videos-without-embed-code","status":"publish","type":"post","link":"https:\/\/cssdeck.com\/blog\/how-to-embed-videos-without-embed-code\/","title":{"rendered":"How To Embed Videos Without Embed Code"},"content":{"rendered":"<p>Before I go into the code, remember that if a video does not have the option to embed, there may be a good reason for that.  You may require special rights to use the video.. but more than likely they don&#8217;t have the right ads in place to embed. <\/p>\n<p>Anyways, let&#8217;s take the modern example of <strong>Ellen.com<\/strong>.  Ellen has created her own video platform (EllenTV) to leverage her giant audience, but the videos have no embed code.  <\/p>\n<p>So we take this page: <a href=\"http:\/\/www.ellentv.com\/videos\/0-pqedxv7g\/\">http:\/\/www.ellentv.com\/videos\/0-pqedxv7g\/<\/a>, and luckily for us, all of her videos are in the same place on the page. <\/p>\n<p><!--more--><\/p>\n<p>CSS<\/p>\n<pre lang=\"css\">\n.mydiv {\nwidth: 780px; \nheight: 415px; \noverflow: hidden;\n}\niframe {\nwidth: 780px;\nheight: 900px; \nmargin-top: -365px; \nmargin-left: 2px;\n}\n<\/pre>\n<p>HTML<\/p>\n<pre>\n&lt;div class=\"mydiv\"&gt;&lt;iframe src=\"http:\/\/www.ellentv.com\/videos\/0-pqedxv7g\/\"&gt;&lt;\/iframe&gt;&lt;\/div&gt;\n<\/pre>\n<p>So basically, you are creating a div and then placing an iframe within it.  By playing with the margins, you can orient the video to fit properly. To save you from auto-play, here is a link with the final output of the code:<\/p>\n<p><a href=\"http:\/\/emptylighthouse.com\/sandra-performs-bang-bang-ellen-show-1342632250\">Sandra Collier Performs &#8216;Bang Bang&#8217; On &#8216;The Ellen Show&#8217;<\/a><\/p>\n<div class=\"wp-socializer wpsr-share-icons \" data-lg-action=\"show\" data-sm-action=\"show\" data-sm-width=\"768\" ><h3>Share and Enjoy !<\/h3><div class=\"wpsr-si-inner\"><div class=\"wpsr-counter wpsrc-sz-32px\" style=\"color:#000\"><span class=\"scount\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook,twitter,linkedin,pinterest,print,pdf\">0<\/span><\/span><small class=\"stext\">Shares<\/small><\/div><div class=\"socializer sr-popup sr-32px sr-circle sr-opacity sr-pad sr-count-1 sr-count-1\"><span class=\"sr-facebook\"><a rel=\"nofollow\" href=\"https:\/\/www.facebook.com\/share.php?u=\" target=\"_blank\"  title=\"Share this on Facebook\"  style=\"color: #ffffff\" ><i class=\"fab fa-facebook-f\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"facebook\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-twitter\"><a rel=\"nofollow\" href=\"https:\/\/twitter.com\/intent\/tweet?text=%20-%20%20\" target=\"_blank\"  title=\"Tweet this !\"  style=\"color: #ffffff\" ><i class=\"fab fa-twitter\"><\/i><\/a><\/span>\n<span class=\"sr-linkedin\"><a rel=\"nofollow\" href=\"https:\/\/www.linkedin.com\/sharing\/share-offsite\/?url=\" target=\"_blank\"  title=\"Add this to LinkedIn\"  style=\"color: #ffffff\" ><i class=\"fab fa-linkedin-in\"><\/i><\/a><\/span>\n<span class=\"sr-pinterest\"><a rel=\"nofollow\" href=\"https:\/\/www.pinterest.com\/pin\/create\/button\/?url=&amp;media=&amp;description=\" target=\"_blank\"  title=\"Submit this to Pinterest\"  style=\"color: #ffffff\" data-pin-custom=\"true\"><i class=\"fab fa-pinterest\"><\/i><span class=\"ctext\"><span data-wpsrs=\"\" data-wpsrs-svcs=\"pinterest\">0<\/span><\/span><\/a><\/span>\n<span class=\"sr-print\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Print this article \"  style=\"color: #ffffff\" ><i class=\"fa fa-print\"><\/i><\/a><\/span>\n<span class=\"sr-pdf\"><a rel=\"nofollow\" href=\"https:\/\/www.printfriendly.com\/print?url=\" target=\"_blank\"  title=\"Convert to PDF\"  style=\"color: #ffffff\" ><i class=\"fa fa-file-pdf\"><\/i><\/a><\/span><\/div><\/div><\/div>","protected":false},"excerpt":{"rendered":"<p>Before I go into the code, remember that if a video does not have the option to embed, there may be a good reason for that.  You may require special rights to use the video.. but more than likely [&#8230;]<\/p>\n<p><a class=\"more-link article\" href=\"https:\/\/cssdeck.com\/blog\/how-to-embed-videos-without-embed-code\/\" title=\"Click to read 'How To Embed Videos Without Embed Code'\">Read Article<\/a><\/p>\n","protected":false},"author":18,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[173],"tags":[],"_links":{"self":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/818"}],"collection":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/users\/18"}],"replies":[{"embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/comments?post=818"}],"version-history":[{"count":0,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/posts\/818\/revisions"}],"wp:attachment":[{"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/media?parent=818"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/categories?post=818"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cssdeck.com\/blog\/wp-json\/wp\/v2\/tags?post=818"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}